Показ / скрытие элементов по клику

Рабочий пример показа/скрытия блоков 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; в скрипт скрытия блока:

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

Заметки фрилансера

Показ / скрытие элементов по клику