jQuery: Делаем сворачивающиеся блоки в теле ноды

Бывает, что текст публикации содержит чересчур «много букв», и в изначальном своем виде вообще трудночитаем и не удобен для восприятия. Значит - самое время задействовать дефолтом подгружающуюся к страницам вашего сайта на Друпале библиотеку jQuery.

Создавая на drupalka.ru раздел Шпаргалки, мне как раз таки и захотелось наделить отдельные блоки с текстом функциональностью раскрываться и закрываться по клику на заголовок блока. Но не путем подгрузки скрипта из misc/collapse.js, чье применение несколько специфично. Задача была сделать это максимально просто и без лишнего кода. В моем случае целевыми блоками стали HTML-таблицы.

И так, библиотека jQuery в наличии у нас изначально. Все, что нужно - это вызвать «к жизни» соответствующие ее функции. Иначе говоря, в коде нужных страниц должен присутствовать «пробуждающий» код. У меня он «нарисовался» таким:

<script type="text/javascript">
$(document).ready(function(){
  $("table").hide(); /* Говорим скрипту, что все, находящееся в теге TABLE изначально должно быть спрятано */
  $("h3").click(function() /* Ссылкой для раскрытия скрытого назначаем текст в теге H3 */
  {
    $(this).next("table").slideToggle(500); /*И поясняем в конце, что по клику на текст в теге H3, данные в теге таблицы должны показываться/скрываться за 500 миллисекунд. */
  });
});
</script>

Другой вариант, где к «открывающему/закрывающему» тегу добавляем динамично отображающийся css-класс (в примере класс «active»).

<script type="text/javascript">
$(document).ready(function(){
  $("table").hide(); /* Говорим скрипту, что все, находящееся в теге TABLE изначально должно быть спрятано */
 
/* Класс «active» добавляеться к тегу h3 при открытом контейнере.*/
  $("h3").toggle(function(){
  $(this).addClass("active");
}, function () {
  $(this).removeClass("active");
});

  $("h3").click(function() /* Ссылкой для раскрытия скрытого назначаем текст в теге H3 */
  {
    $(this).next("table").slideToggle(500); /*И поясняем в конце, что по клику на текст в теге H3, данные в теге таблицы должны показываться/скрываться за 500 миллисекунд. */
  });
});
</script>

Вместо инициализации тегов примера можно, естественно, поставить любые другие. Принцип вызова достаточно прост.

Что бы вызывался вышеприведенный код только на нужных страницах, себе его вызов был мной помещен в начало файла node.tpl.php темы следующим образом:

<?php if ($page && $type == 'cheatsheet') // Условие: если полностью открытая нода и если тип материала - cheatsheet.
drupal_add_js('$(document).ready(function(){
  $("table").hide();
  $("h3").click(function()
  {
    $(this).next("table").slideToggle(500);
  });
});'
, 'inline');
?>

В довершении всего не забудьте настроить в вашем файле стилей внешний вид раскрывающихся блоков и ссылок для их раскрытия. Если все это как то не выделить, то потенциальный читатель вашего замечательного динамического текста может попросту не понять «что есть что». Хотя бы вид курсора поменяйте при наведении на текст «раскрывающего» тега.

Обязательно задайте правило для раскрывающегося контейнера: position: relative. Без него во всех версиях IE открывающийся текст будет накладываться на уже открытый.

Рабочий пример, того, что получится.

Dalay

Комментарии

У меня текст, помещенный между тегами

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

. И дальше уже никак не раскрыть.

Другой тест для обычного текста (не форма) между тэгами

открывается и тут же закрывается обратно. Текст между

по-прежнему не становится видимым образом ссылкой.

если все подключили и прописали правильно, значит просто конфликтует этот скрипт с другим(и), в этом и ищите решение проблемы, или вам просто соболезнования нужны?