Toggler
Expanded Option
This option has been set to false so that content starts as toggled off on page load.
Animated Option
This option has been set to true so that toggle transitions will animate.
Transition Option
This option controls duration of transition, easing type, as well as callback functions.
closeAllOnExpand Option
This option has been set to true so that all other toggle switches will be set to off when one switch is toggled on.
<div id="myToggler">
<h4 class="header toggler-header-collapsed"><span>Expanded</span> Option</h4>
<p class="content toggler-content-collapsed">This option has been set to <span>false</span> so that content starts as toggled off on page load.</p>
<h4 class="header toggler-header-collapsed"><span>Animated</span> Option</h4>
<p class="content toggler-content-collapsed">This option has been set to <span>true</span> so that toggle transitions will animate.</p>
<h4 class="header toggler-header-collapsed"><span>Transition</span> Option</h4>
<p class="content toggler-content-collapsed">This option controls duration of transition, easing type, as well as callback functions.</p>
<h4 class="header toggler-header-collapsed"><span>closeAllOnExpand</span> Option</h4>
<p class="content toggler-content-collapsed">This option has been set to <span>true</span> so that all other toggle switches will be set to off when one switch is toggled on.</p>
</div>YUI().use(
'aui-toggler',
function(Y) {
new Y.TogglerDelegate(
{
animated: true,
closeAllOnExpand: true,
container: '#myToggler',
content: '.content',
expanded: false,
header: '.header',
transition: {
duration: 0.2,
easing: 'cubic-bezier(0, 0.1, 0, 1)'
}
}
);
}
);