Аватар пользователя Dima

Простой способ создания сворачивающихся блоков с эффектом памяти [Drupal 7]

Реализуется все очень просто с помощью модуля Ctools. Если у вас на сайте установлен и включен модуль Views, тогда и  Ctools  модуль также установлен и включен. Если модуль  Ctools  еще не установлен - установите его и включите как обичный модуль.


Ctools предоставляет простое API для создания сворачивающихся блоков.
Это всего 4 класса котрые нужно присвоить определенным элементам:

  1. ctools-collapsible-container: обертка для контейнера который будет свернут. Элемент дожен быть DIV;
  2. ctools-collapsible-handle: заголовок по которому будет происходить клик, в результате чего будет свернут элемент. Может быть любым блочным элементом (DIV, H2 и т.д.);
  3. ctools-collapsible-content: контент блока, будет показан только если блок развернут. Должеть быть DIV;
  4. ctools-collapsible-remember: Эсли контейнеру задан этот класс, его состояние будет запоминаться после перезагрузки. Важно! У в этом случае контейнер должен иметь уникальный идентификатор.

Для реализации функционала сворачивающихся блоков нужно реализовать небольшую HTML разметку:

Это тайтл блока

Это контент блока который будет спрятан
И подключить javascript файл из пакета Ctools: (Подключить js файл можна любым другим способом)

Демонстрационный пример:

 

Это тайтл блока

Это контент блока который будет спрятан

 

UPDATE: 

Также удобно использовать предоставляемую пакетом Ctools функцию темы  theme_ctools_collapsible($variables);

 

$handle = t('Title'); $content = 'Some HTML content'; $markup = theme('ctools_collapsible', array('handle' => $handle, 'content' =>$content, 'collapsed' => TRUE));