The Collapsible component in Materialize CSS

For creating accordion/collapsible in your web pages, you may utilize the built-in component of Materialize CSS easily.

The collapsible component allows you hiding the content within a webpage that a user does not want to interact with for time being. The user may click on the header panel for displaying the content anytime.

That way, the space on a web page can be utilized smartly for sections/components that are more interesting to the user.

For creating collapsible/accordion in your webpage, use the <ul>, <li> tags with collapsible, collapsible-header and collapsible-body classes as shown in the examples below.

The example of simple Materialize Collapsible/Accordion

For creating a collapsible component, the <ul> tag is assigned the collapsible class. Inside the <li> tags, two <div> elements are used and assigned the collapsible-header and collapsible-body classes.

In the div with the collapsible-header class, you may place an icon with the title for each section in accordion/collapsible. Have a look at the example with three sections:

materialize collapsible

See online demo and code

The markup:

A little script for initializing the collapsible:

You may also use simple JavaScript for that:

Did you know? The Collapsible is called an accordion when just one section expands at a time. If multiple sections may expand then it is called an Expandable. The above example is an accordion which is the default behavior of the Materialize Collapsible. For that, see an example in the later part.

The example of preselected selection

In a certain scenario, you may require opening a specific section content in the collapsible as the web page loads. For that, simply use the active class in the <li> tag that you want to preselect. See an example below:

See online demo and code

The markup for the preselected panel:

See the complete code on the demo page.

The example of Expandable

In above examples, you can see only one section can be opened at a time. If you want to keep all sections opened unless closed by the user after clicking on the panel (after opening it) then use the expandable class in the <ul> tag containing collapsible class.

materialize expandable

See online demo and code

The markup:

A little JavaScript as well for disabling the accordion:

That is it!

The Popout style example

The popout style also opens single section at a time that opens in a popout style as the section’s heading/panel is pressed. The image won’t speak itself so have a look at the live demo online to experience it yourself.

See online demo and code

The markup for <ul>:

<ul class=”collapsible popout”>

For popout style collapsible, just add the popout class in the <ul> with collapsible class.

Give some colors and other styles in collapsible

As you have seen in the above examples, the default collapsible is simple with white background and grayish borders.

You may want to change the default look to match with the theme of your website for the accordion or some other collapsible style. For that, you may override the existing CSS classes and provide your own values for different properties like background-color, border etc.

First, have a look at the following example where I changed the header look by overriding the collapsible-header class:

materialize accordion custom

See online demo and code

The CSS for the header:

Must place this after the reference to materialize.min.css.

The demo of customizing the accordion body

For customizing the body of the accordion, you may override the collapsible-body class properties for background color, text color, and other properties.

Have a look at the demo for the accordion custom style; both for header and body.

materialize accordion

See online demo and code

The CSS:

See the full code on the example page.