Materialize Collapsible

Materialize Collapsible: Collapsible are accordion that expands when you click on it. It displays only the relevant content and hides other content.
Materialize provides collapsible with various options which can be used easily anywhere. Here in this tutorial we are going to explain how you can create collapsible in Materialize. You can also use our online editor to edit and run the code online.

Materialize Collapsible Example

Let us create a very basic and simple Collapsible-

In the above example we have created a very basic collapsible in Materialize. As we know it’s jQuery plugin so do not forget to initialize it.If you run the above example it will produce the output something like this –

Popout

To create popout collapsible add the class=”popout” to ul simply as below –

If you run the above example it will produce output something like this –

Preselected Section | Active Section

Sometimes we need to open some section by default or using JavaScript, to do this simply add the active class to header. Here is an example of Active class –

If you run the above example it will produce output something like this –

Options

Following options are available –

• accordion(boolean): This is used to change the collapsible behavior to expandable instead of the default accordion style.
• onOpen(function): This is callback function triggered when collapsible is opened.
• onClose(function): This is callback function triggered when collapsible is closed.

Collapsible Types

There are basically two types of collapsible avaialable in Materialize –

1. Accordion
2. Expandable

Let us understand both one by one –

Accordion

data-collapsible=”accordion” is used to create accodion. In Acoordion one section is opened at a time –

Expandable

data-collapsible=”expandable” is used to create expandable collapsible. In Expandable collapsible more than one section can be opened at the same time –

Run the above example and click on more than one section to open the other section at the same time. The output of the above example will look like something this –