Открытие и скрытие блока при клике по ссылке

[admin]

Как то в одном моем проекте мне надо было реализовать скрытие и отображение части текста — кликая по ссылке. Учитывая то, что заказчик сам выбирает что скрывать, мне нужен был скрипт jquery, который не будет зависеть от места его применения.

Для начала надо продумать все так, что бы неподготовленный человек смог использовать данный функционал. Конечно же, все должно быть просто и редактироваться в визуальном редакторе или при минимальном копании в html коде описания или статьи.

Поэтому реализовал я это следующим образом. Когда заказчику надо было скрыть часть текста, он перед скрываемым блоком писал Слово-ссылку (например “Подробнее”), и присваивал этому слову заголовок h6, после которого все что надо было скрыть — помещали в контейнер div с классом hide. Получалась вот такая конструкция html кода:

<h6>Подробнее</h6>
<div class='hide'>

    <p>Скрытый текст</p>

    <p>Скрытый текст</p>

</div>

Для скрытия текста, нам надо в css файл стилей вписать .hide{display:none;} после чего блок будет недоступен для просмотра.

Для открытия блока по клику на текст Подробнее, где в тех же css стилях его можно украсить под ссылку, нам надо добавить javascript код на jquery. Для этого нам надо добавить на страницу скрипт:

$(function(){
    $('h6').toggle(function(){
		$(this).next("div.hide").slideDown();
		$('h6').html("Закрыть");
    }, function(){
		$(this).next("div.hide").slideUp();
		$('h6').html("Подробнее");
	});
});

После этих дополнений мы можем скрывать и открывать блоки с контентом по клику на ссылку или текст.

Обратите внимание еще на такой момент. Скрывая текст от пользователя, таким образом, Вы рискуете, что поисковые системы посчитают это за черный метод SEO, за что могут быть применены санкции до сайта. Но если это делать в меру, например скрывать табличные данные, и писать текст ссылки как посмотреть характеристики , то оно будет удобно, и вероятность что сайт залетит под фильтры поисковых систем сводятся к нулю.