Expandable

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

Table of Contents

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

Default Selectors

By default, all elements with the class="ui-expandable" or data-role="expandable" attribute are displayed as Expandable components.

Manual Constructor

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

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.

<script>
   var expandableEl = document.getElementById("expandable"),
       expandableWidget = tau.widget.Expandable(expandableEl, {collapsed: false});
</script>

HTML Examples

• To create a expandable div element using the class attribute:

  <div id="expandable-test" class="ui-expandable" data-collapsed="false">
     <h1>Expandable head</h1>
     <div>Content</div>
  </div>
  

• To create a expandable list using the class attribute:

  <ul class="ui-listview">
     <li class="ui-expandable" data-collapsed="false">
        <h2>Expandable head</h2>
        <!--Sub list in expandable li-->
        <ul class="ui-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

Methods

To call a method on the component, see the following code:

var expandableElement = document.getElementById("expandable"),
    expandableWidget = tau.widget.Expandable(expandableElement);

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

Summary

disable (  ) 

enable (  ) 

disable

Disables the expandable component.

disable ( ) 

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

Return value:

Type	Description
Expandable	The disabled Expandable component.

Code example:

<div id="expandable" class="ui-expandable">
   <h6>Expandable head</h6>
   <div>Content</div>
</div>
<script>
   var expandableWidget = tau.widget.Expandable(document.getElementById("expandable"));
   expandableWidget.disable();
</script>

enable

Enables the expandable component.

enable ( ) 

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

Return value:

Type	Description
Expandable	The enabled Expandable component.

Code example:

<div id="expandable" class="ui-expandable">
   <h6>Expandable head</h6>
   <div>Content</div>
</div>
<script>
   var expandableWidget = tau.widget.Expandable(document.getElementById("expandable"));
   expandableWidget.enable();
</script>