Collapsible

The collapsible component allows you to expand and collapse content when tapped.

Note
This component has been DEPRECATED since Tizen 2.4.
To support Backward compatibility, please import tau.support-2.3.js.
Since 2.4, to use Collapsible component, please use a Expandable Component.

Table of Contents

  1. Default Selectors
  2. Manual Constructor
  3. HTML Examples
  4. Options
  5. Methods

Default Selectors

By default, all elements with the data-role="collapsible" attribute are displayed as collapsible components.

Manual Constructor

To manually create a collapsible component, use the component constructor from the tau namespace:

<script>
   var collapsibleElement = document.getElementById("collapsible"),
       collapsible = tau.widget.Collapsible(collapsibleElement);
</script>

The constructor requires an HTMLElement parameter to create the component, and you can get it with the document.getElementById() method. The constructor can also take a second parameter, which is an object defining the configuration options for the component.

If the jQuery library is loaded, you can use its method:

<script>
   var collapsible = $("#collapsible").collapsible();
</script>

The jQuery constructor takes one optional parameter, which is an object defining the configuration options for the component.

HTML Examples

  • To create a collapsible div element using the data-role attribute:

    <div id="collapsible" data-role="collapsible" data-inset="false">
   <h1>Collapsible head</h1>
   <div>Content</div>
</div>

  • To create a collapsible list using the data-role attribute:

    <ul data-role="listview">
   <li data-role="collapsible" data-inset="false">
      <h2>Collapsible head</h2>
      <!--Sub list in collapsible li-->
      <ul data-role="listview">
         <li>sub list item1</li>
         <li>sub list item2</li>
      </ul>
   </li>
   <!--List item in 1st depth-->
   <li>other list item</li>
   <li>other list item</li>
</ul>

Options

The options for a component can be defined as data-... attributes or passed as parameters to the constructor.

You can change an option for the component using the option method.

Summary

Option Input type Default value Description
data-collapse-cue-text string "" Cue text for closing the expandable list; used to provide audible feedback.
data-collapsed boolean true Sets whether the content must be collapsed on load.
data-collapsed-icon string | null null Icon class for a collapsed component.
data-expand-cue-text string "" Cue text for opening the expandable list; used to provide audible feedback.
data-expanded-icon string | null null Icon class for an expanded component.
data-heading string "h1,h2,h3,h4,h5,h6,legend,li" Within the collapsible container, the first immediate child element.
data-iconpos string | null null Icon position (the default is right).
data-inset boolean true Sets whether the component must be shown as an inset.

Methods

To call a method on the component, use one of the existing APIs:

  • TAU API (RECOMMENDED):

    var collapsibleElement = document.getElementById("collapsible"),
    collapsible = tau.widget.Collapsible(collapsibleElement);

collapsible.methodName(methodArgument1, methodArgument2, ...);

  • jQuery API (support for backward compatibility):

    $(".selector").collapsible("methodName", methodArgument1, ...);

Summary

Method Description 
disable()

Disables the collapsible component.

 
enable()

Enables the collapsible component.

 
refresh()

Refreshes the collapsible component.
disable

Disables the collapsible component.

Collapsible disable()

The method sets the disabled attribute for the collapsible component and adds classes related to the disabled state.

Return value:

Type Description
Collapsible Returns this.

Code example (TAU API RECOMMENDED):

 
<div id="collapsible" data-role="collapsible" data-inset="false">
   <h6>Collapsible head</h6>
   <div>Content</div>
</div>
<script>
   var collapsibleWidget = tau.widget.Collapsible(document.getElementById("collapsible"));
   collapsibleWidget.disable();
</script>

Code example (jQuery API support for backward compatibility):

 
<div id="collapsible" data-role="collapsible" data-inset="false">
   <h6>Collapsible head</h6>
   <div>Content</div>
</div>
<script>
   $("#collapsible").collapsible("disable");
</script>
enable

Enables the collapsible component.

Collapsible enable()

The method removes the disabled attribute from the collapsible component and adds classes related to the enabled state.

Return value:

Type Description
Collapsible Returns this.

Code example (TAU API RECOMMENDED):

 
<div id="collapsible" data-role="collapsible" data-inset="false">
   <h6>Collapsible head</h6>
   <div>Content</div>
</div>
<script>
   var collapsibleWidget = tau.widget.Collapsible(document.getElementById("collapsible"));
   collapsibleWidget.enable();
</script>

Code example (jQuery API support for backward compatibility):

 
<div id="collapsible" data-role="collapsible" data-inset="false">
   <h6>Collapsible head</h6>
   <div>Content</div>
</div>
<script>
   $("#collapsible").collapsible("enable");
</script>
refresh

Refreshes the collapsible component.

Collapsible refresh()

Return value:

Type Description
Collapsible Returns this.

Code example (TAU API RECOMMENDED):

 
<div id="collapsible" data-role="collapsible" data-inset="false">
   <h6>Collapsible head</h6>
   <div>Content</div>
</div>
<script>
   var collapsibleWidget = tau.widget.Collapsible(document.getElementById("collapsible"));
   collapsibleWidget.refresh();
</script>

Code example (jQuery API support for backward compatibility):

 
<div id="collapsible" data-role="collapsible" data-inset="false">
   <h6>Collapsible head</h6>
   <div>Content</div>
</div>
<script>
   $("#collapsible").collapsible("refresh");
</script>