jade/page-contents/collapsible_content.html
Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.
_filter_drama_First
_place_Second
_whatshot_Third
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="collapsible">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
</li>
</ul>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.collapsible').collapsible();
});
active class to the li wrapping the collapsible-header._filter_drama_First
_place_Second
_whatshot_Third
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<li class="active">
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
</li>
You can customize the behavior of each collapsible using these options. For example, you can call a custom function to run when a collapsbile is opened or closed. The function passes the li element that was opened or closed as an argument.
| Name | Type | Default | Description |
|---|---|---|---|
| accordion | Boolean | true | If accordion versus collapsible. |
| onOpenStart | Function | null | Callback function called before collapsible is opened. |
| onOpenEnd | Function | null | Callback function called after collapsible is opened. |
| onCloseStart | Function | null | Callback function called before collapsible is closed. |
| onCloseEnd | Function | null | Callback function called after collapsible is closed. |
| inDuration | Number | 300 | Transition in duration in milliseconds. |
| outDuration | Number | 300 | Transition out duration in milliseconds.. |
You can programmatically open and close collapsibles through these methods. The second parameter is the 0-based index of the collapsible you want to open.
Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:
var instance = M.Collapsible.getInstance(elem); /* jQuery Method Calls You can still use the old jQuery plugin method calls. But you won't be able to access instance properties. $('.collapsible').collapsible('methodName'); $('.collapsible').collapsible('methodName', paramName); */
Open collapsible section.
Integer: Nth section to open.
instance.open(3);
Close collapsible section.
Integer: Nth section to close.
instance.close(3);
Destroy plugin instance and teardown
instance.destroy();
| Name | Type | Description |
|---|---|---|
| el | Element | The DOM element the plugin was initialized with. |
| options | Object | The options the instance was initialized with. |
There are two ways a collapsible can behave. It can either allow multiple sections to stay open, or it can only allow one section to stay open at a time, which is called an accordion. See below for a demo of each type.
_filter_drama_First
_place_Second
_whatshot_Third
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is default behavior.
_filter_drama_First
_place_Second
_whatshot_Third
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="collapsible expandable">
var elem = document.querySelector('.collapsible.expandable');
var instance = M.Collapsible.init(elem, {
accordion: false
});
_filter_drama_First
_place_Second
_whatshot_Third
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ul class="collapsible popout">