Skip to main content

​
Description

The toggle panes directive

​
Usage

as attribute 
<ANY widget-slide-down
     [duration="{string}"]
     [easing="{string}"]
     [closed="{boolean}"]
     [height="{Number}"]
     [response="{Object}"]>
   ...
</ANY>
as class 
<ANY class="widget-slide-down [duration: {string};] [easing: {string};] [closed: {boolean};] [height: {Number};] [response: {Object};]">
   ...
</ANY>

​
Directive info

  • This directive creates new scope.

​
Parameters

ParamTypeDetails
duration (optional)stringDuration of the animation. Default 0.3 (seconds)
easing (optional)stringCSS timing function i.e. ease-out
closed (optional)booleanStarts the slidable element off as open
height (optional)NumberSet the height of the opened panel. Useful if the content is dynamically loaded.
response (optional)ObjectWait for a response before calculating the height and check for updates

​
Example

​
Source

<button class="tk-stl-button" widget-slide-toggle="#foo1">Expand 1</button>
<div id="foo1" class="widget-slide-down">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci deserunt, doloremque ducimus enim nemo officia pariatur quibusdam quos ratione suscipit, tempora temporibus voluptatem. Ea eveniet incidunt magni minus quaerat.</p>
    <br>
    <p padding-bottom="2">Ad adipisci deserunt, doloremque ducimus enim nemo officia pariatur quibusdam quos ratione suscipit, tempora temporibus voluptatem. Ea eveniet incidunt magni minus quaerat.</p>
</div>

​
Result

Result