At Materialize the accordion is called 'Collapsible'. They are very easy to create. Open the 'Read more' section to learn about editing and some tweaking.
The accordion consists of a list, for which you need to use the element 'list container' in SD3.x. 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>.
Mind you, I haven't tested what happens if you add all these extra classes at the same time to an accordion. You will have to check out that yourself. ;)
You can add some cards...
Here we have another accordion1
You can have an accordion inside an accordion. And even another one inside that again.
From Essaouira, Morocco. What if the owner of the middle boat wants to get out before all the rest?