-
Read more...
The accordion consists of a list, for which you need to use the element 'list container'. Inside the list containers you have the 'list item containers'. They are the <ul> and <li> respectively, written in html. Each <li> has two containers, the first one has to be given the class .collapsible-header, the second one .collapsible-body.
It is a good avice NOT to give the class name .collapsible-body before you have edited the contents, because that class is styled to make the element disappear from visibility. Instead, give it some temporary name, so that it is easily regognized, and rename it to .collapsible-body when the editing has been completed. And if you have more accordions inside each other, start renaming the innermost ones!
Typically an accordion has all the sections closed by default. If you want to have one open, you can give the <li> the class .active.
Also, default is, that when you open one section, any other open section closes. if you want to have more than one section open at the same time, add an extra class .expandable to the <ul>.It is also possible to make the sections pop out a bit when opened. That is done with the extra class .popout to the <ul>. -
Add whatever you like
You can add a card...
-
Dig deep
Here we have another accordion
-
Deeper...
You can have an accordion inside an accordion. And even another one inside that again.
-
...and again...
From Essaouira, Morocco. What if the owner of the middle boat wants to get out before all the rest?
-
Nested Accordion
In 'Materialize speak' an 'accordion' is called a 'Collapsible'. They are not hard to create. In the 'Read more' section of this accordion you can read about how to edit and tweak it.
Since this is a nested accordion, it means there is another accordion inside the first one. If you don't need it, you can delete it. Just search for the list container with the ID #nested If more sections are needed, just duplicate one of the existing ones, with the class name .collapsible-section
Download this component