ProfiPHPProfiPHP
Категория: jQuery

Свертывания и развертывания скрытого текста при нажатии

Очень часто на страницах сайта необходимо скрыть определенный текст, и открыть его только при нажатии на ссылку или определенный блок. С помощью библиотеки jQuery данный процесс можно очень просто реализовать.

Обязательно перед использованием необходимо подключить библиотеку jQuery.

Добавляем следующий JS код:
<script type="text/javascript">
jQuery(function( $ ) {
$('.show').click(function() {
$(this).toggleClass('active').next()[$(this).next().is(':hidden') ? "slideDown" : "slideUp"](400);
});
});
</script>
Добавляем таблицу стилей:
<style type="text/css">
.information{ display: none; border: 1px solid black; color: #444; height: auto; margin: 5px 0; padding: 10px; text-align: justify }
.show{ cursor: pointer; col1or: #4C6695; margin: 1px 0 0 }
.show:hover{ text-decoration: underline }
</style>
И код HTML:
<h3 class="show">Показать/Скрыть</h3>
<div class="information">Скрытый текст</div>
В результате, при нажатии на текст "Показать/Скрыть" вы увидите "Скрытый текст", который расположен в блоке Div с классом Information.

Добавить комментарий

Имя:
Текст комментария: