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>