Collapsible list

This is a developer module.

'collapsible_list' exposes theme_collapsible_list, which will theme an array as a collapsible unordered (<ul>) or ordered (<ol>) list.

Only few list items are shown by default. The rest is hidden and a 'View all' button is provided after the last visible list item. When selected, all list items are shown, and the button changes its label to 'View less'.

Usage

$variables = array(
  'items' => array('item1', 'item2', 'item3'),
  'title_text' => 'List titme',
  'title_wrapper' => 'h2',
  'title_path' => 'http://sitename.com',
  'title_options' => array(
    'attributes'  => array(
      'title'  => 'Go to sitename.com',
      'class'  => 'link-class',
    ),
   ),
  'type' => 'ul',
  'cutoff' => 3,
  'show_text' => 'View all',
  'hide_text'  => 'View less',
  'wrapper_class' => 'collapsible-list',
  'control_class' => 'collapsible-list__control',
  'list_class' => 'collapsible_list__item',
  'list_item_class' => 'collapsible-list__item',
);
theme('collapsible_list', $variables);

Parameters

$variables: an associative array containing:

• items: an array of items to be displayed in the collapsible list
• title_text: the title of the list (default: '')
• title_wrapper: HTML element used as list title's wrapper, for example <h2>>
• (default: 'h2')
• title_path: if list title is meant to be a link, this parameter is used to pass the value of link's 'href' attribute (default: '')
• title_options: the options applied to the list title link (default: array('attributes' => array(), 'html'=> false) )
• type: the type of list to return - <ol> or <ul> (default: 'ul')
• cutoff: number of list items which should be visible (default: 3)
• show_text: show/hide control's label when the list is collapsed (default: 'View all')
• hide_text: show/hide control's label when the list is expanded (default: View less')
• wrapper_class: class added to the collapsible-list element (default: 'collapsible-list')
• control_class: class added to the show/hide button (default: 'collapsible-list__control')
• list_class: class added to the list of items (default: 'collapsible_list__items')
• list_item_class: class added to each list item (default: 'collapsible_list__item')

Examples:

Default collapsible list

Function theme_collapsible_list accepts a single keyed array as an argument:
theme('collapsible_list', $variables);

In its simplest form, $variables only requires an 'items' array:

PHP input

$variables = array(
  'items' => array('item1', 'item2', 'item3', 'item4', 'item5'),
);
theme('collapsible_list', $variables);

HTML output

<div class="collapsible-list" data-js="collapsible-list" id="collapsible_list_0">
  <ul class="collapsible_list__items">
    <li class="collapsible_list__item collapsible_list__item--first first">item1</li>
    <li class="collapsible_list__item">item2</li>
    <li class="collapsible_list__item">item3</li>
    <li class="collapsible_list__item collapsible_list__item--first-hidden" style="display: none; outline: medium none;" tabindex="-1">item4</li>
    <li class="collapsible_list__item collapsible_list__item--last last" style="display: none;">item5</li>
  </ul>
  <button class="collapsible-list__control" aria-controls="collapsible_list_0" aria-expanded="false">View all</button>
</div>

Changing list type

By default all items are displayed as an unordered list. This can be changed to ordered list using 'type' variable. Please note that type variable only accepts two values: 'ol' or 'ul':

PHP input

$variables = array(
  'items' => array('item1', 'item2', 'item3', 'item4', 'item5'),
  'type' => 'ol',
);
theme('collapsible_list', $variables);

HTML output

<div class="collapsible-list" data-js="collapsible-list" id="collapsible_list_0">
  <ol class="collapsible_list__items">
    <li class="collapsible_list__item collapsible_list__item--first first">item1</li>
    <li class="collapsible_list__item">item2</li>
    <li class="collapsible_list__item">item3</li>
    <li class="collapsible_list__item collapsible_list__item--first-hidden" style="display: none; outline: medium none;" tabindex="-1">item4</li>
    <li class="collapsible_list__item collapsible_list__item--last last" style="display: none;">item5</li>
  </ol>
  <button class="collapsible-list__control" aria-controls="collapsible_list_0" aria-expanded="false">View all</button>
</div>

Providing list title

An optional 'title_text' key will add a title to the output. By default list title will be marked-up as a level two heading (<h2>). It is possible, however, to change its mark-up using 'title_wrapper' variable to ensure correct heading structure on page:

PHP input

$variables = array(
  'items' => array('item1', 'item2', 'item3', 'item4', 'item5'),
  'title_text' => t('List title'),
  'title_wrapper' => 'h4',
);
theme('collapsible_list', $variables);

HTML output

<div class="collapsible-list" data-js="collapsible-list" id="collapsible_list_0">
  <h4>List title</h4>
  <ul class="collapsible_list__items">
    <li class="collapsible_list__item collapsible_list__item--first first">item1</li>
    <li class="collapsible_list__item">item2</li>
    <li class="collapsible_list__item">item3</li>
    <li class="collapsible_list__item collapsible_list__item--first-hidden" style="display: none; outline: medium none;" tabindex="-1">item4</li>
    <li class="collapsible_list__item collapsible_list__item--last last" style="display: none;">item5</li>
  </ul>
  <button class="collapsible-list__control" aria-controls="collapsible_list_0" aria-expanded="false">View all</button>
</div>

List title as a link

List title can also be a link. In that case, additional 'title_path' variable needs to be provided. An optional 'title_options' variable can be used to pass link's attributes:

PHP input

$variables = array(
  'items' => array('item1', 'item2', 'item3', 'item4', 'item5'),
  'title_text' => t('List title (link text)'),
  'title_path' => 'http://sitename.com',
  'title_options' => array(
    'attributes'  => array(
      'title'  => 'Go to sitename',
      'class'  => 'custom-link-class',
    ),
   ),
);
theme('collapsible_list', $variables);

HTML output

<div class="collapsible-list" data-js="collapsible-list" id="collapsible_list_0">
  <h2><a href="http://sitename.com" title="Go to sitename" class="custom-link-class">List title (link text)</a></h2>
  <ul class="collapsible_list__items">
    <li class="collapsible_list__item collapsible_list__item--first first">item1</li>
    <li class="collapsible_list__item">item2</li>
    <li class="collapsible_list__item">item3</li>
    <li class="collapsible_list__item collapsible_list__item--first-hidden" style="display: none; outline: medium none;" tabindex="-1">item4</li>
    <li class="collapsible_list__item collapsible_list__item--last last" style="display: none;">item5</li>
  </ul>
  <button class="collapsible-list__control" aria-controls="collapsible_list_0" aria-expanded="false">View all</button>
</div>

Changing number of visible items

By default 3 list items are shown. This can be changed using 'cutoff' variable:

PHP input

$variables = array(
  'items' => array('item1', 'item2', 'item3', 'item4', 'item5'),
  'cutoff' => 1,
);
theme('collapsible_list', $variables);

HTML output

<div class="collapsible-list" data-js="collapsible-list" id="collapsible_list_0">
  <ul class="collapsible_list__items">
    <li class="collapsible_list__item collapsible_list__item--first first">item1</li>
    <li class="collapsible_list__item collapsible_list__item--first-hidden" style="display: none; outline: medium none;" tabindex="-1">item2</li>
    <li class="collapsible_list__item" style="display: none;">item3</li>
    <li class="collapsible_list__item" style="display: none;">item4</li>
    <li class="collapsible_list__item collapsible_list__item--last last" style="display: none;">item5</li>
  </ul>
  <button class="collapsible-list__control" aria-controls="collapsible_list_0" aria-expanded="false">View all</button>
</div>

Changing button labels

By default the show/hide button is labelled 'View all' when the list is collapsed, and 'View less' when the list is expanded. These labels can be changed using 'show_text' and 'hide_text' variables:

PHP input

$variables = array(
  'items' => array('item1', 'item2', 'item3', 'item4', 'item5'),
  'show_text' => t('Show all items'),
  'hide_text' => t('Show less items'),
);
theme('collapsible_list', $variables);

HTML output

<div class="collapsible-list" data-js="collapsible-list" id="collapsible_list_0">
  <ul class="collapsible_list__items">
    <li class="collapsible_list__item collapsible_list__item--first first">item1</li>
    <li class="collapsible_list__item">item2</li>
    <li class="collapsible_list__item">item3</li>
    <li class="collapsible_list__item collapsible_list__item--first-hidden" style="display: none; outline: medium none;" tabindex="-1">item4</li>
    <li class="collapsible_list__item collapsible_list__item--last last" style="display: none;">item5</li>
  </ul>
  <button class="collapsible-list__control" aria-controls="collapsible_list_0" aria-expanded="false">Show all items</button>
</div>

Changing class names

PHP input

$variables = array(
  'items' => array('item1', 'item2', 'item3', 'item4', 'item5'),
  'wrapper_class' => 'custom-wrapper-class',
  'control_class' => 'custom-button-class',
  'list_class' => 'custom-list-class',
  'list_item_class' => 'custom-list-item-class',
);
theme('collapsible_list', $variables);

HTML output

<div class="custom-wrapper-class" data-js="collapsible-list" id="collapsible_list_0">
  <ul class="custom-list-class">
    <li class="custom-list-item-class custom-list-item-class--first first">item1</li>
    <li class="custom-list-item-class">item2</li>
    <li class="custom-list-item-class">item3</li>
    <li class="custom-list-item-class custom-list-item-class--first-hidden" style="display: none; outline: medium none;" tabindex="-1">item4</li>
    <li class="custom-list-item-class custom-list-item-class--last last" style="display: none;">item5</li>
  </ul>
  <button class="custom-button-class" aria-controls="collapsible_list_0" aria-expanded="false">View all</button>
</div>