Material Admin

Collapsible
Home Collapsible
Basic Collapsible

Collapsibles are accordion elements that expand when clicked on. They allow you to hide content that is not immediately relevant to the user.

  • filter_dramaFirst
    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. 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. 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.
  • placeSecond
    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.
  • whatshotThird
    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>
Initialization
                                    
                                        var elem = document.querySelector('.collapsible');
                                        var instance = M.Collapsible.init(elem, options);

                                        // Or with jQuery

                                        $(document).ready(function(){
                                            $('.collapsible').collapsible();
                                        });
Preselected Section
If you want a collapsible with a preopened section just add the active class to the collapsible-header.
  • filter_dramaFirst
    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. 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. 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.
  • placeSecond
    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.
  • whatshotThird
    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>
Options
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..
Methods
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();

Open collapsible section.

Integer: Nth section to open.

                                    
                                    instance.open(3);
.close();

Close collapsible section.

Integer: Nth section to close.

                                    
                                        instance.close(3);
.destroy();

Destroy plugin instance and teardown

                                    
                                        instance.destroy();
Properties
Name Type Description
el Element The DOM element the plugin was initialized with.
options Object The options the instance was initialized with.
Accordion
  • filter_dramaFirst
    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.
  • placeSecond
    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.
  • whatshotThird
    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.
Expandable
                                    
                                        <ul class="collapsible expandable">
                                    
                                
                                    
                                        var elem = document.querySelector('.collapsible.expandable');
                                        var instance = M.Collapsible.init(elem, {
                                            accordion: false
                                        });
Popout
  • filter_dramaFirst
    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.
  • placeSecond
    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.
  • whatshotThird
    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">
All Rights Reserved by Materialart. Designed and Developed by WrapPixel.
settings