Заметки кодера сайтов

Рабочий пример показа/скрытия блоков html

Особенностью моего скрипта является возможность множества блоков на одной странице. Главное каждому блоку и ссылке прописывать свой оригинальный атрибут. Для ссылки это href="#first", а для скрывающегося блока — id="first". И ставим для каждого блока свой оригинальный идентификатор.

Исходный код HTML такой:

<div class="block orange">
    <h6><a href="#first" class="button">Открыть блок</a></h6>
    <div id="first" class="informer">
        <p>Текст скрытого блока</p>
    </div>
</div>
<div class="block orange">
    <h6><a href="#second" class="button">Открыть второй блок</a></h6>
    <div id="second" class="informer">
        <p>Текст скрытого блока</p>
    </div>
</div>

Конечно нужно подключить jquery и сам скрипт показа/скрытия блоков:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type='text/javascript'>
    jQuery(document).ready(function($) {
var btn = $('.button'),
    cnt = $('.informer');
btn.on('click', function() {
   cnt.slideUp(300);   
    $($(this).attr('href')).slideDown('slow');    
});
    });
  </script>

В стили нужно добавить лишь следующее:

.informer{display: none}

 

Я сразу постарался сделать этот скрипт безконфликтным. Но я применял его только на Joomla 3.4.8. Там есть свои особенности. Возможно вам придется еще добавить jQuery.noConflict; в скрипт скрытия блока:

 

<script type='text/javascript'>

jQuery.noConflict();
    jQuery(document).ready(function($) {.........