If you want to use our Bare-Bone system (CC's formerly Vanilla, now 'Frameworkless' system) for your website and need help findig code for building blocks, turn to w3schools.com. There you can find all kinds of material written in html and css, and sometimes also java script. Unlike Bootstrap, Foundation and Materialize, which all have their own sets of classes and attributes that don't work with Bare-Bone, code from w3schools.com can be used in any grid system.
Most of the building blocks are built desktop down, which would suit many Bare-Bone users just fine. And once you have built something and got it working, you can save it as a theme or a component for later use.
This accordion has been built 'mobile-up, though.
You can put anything into a panel, be it images, videos, music players...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.
Accordion
The accordion can be used to hide / reveal more details about something, or for definitions, 'read more...' and such. They are easily created, the most difficult part seems to be spelling the word 'accordion' correctly! (Against some people's belief, it's NOT 'accordian'!).
The width of the accordion can be regulated by popping it into a container with specified dimensions. Otherwise it will spread out to cover the whole width of a page.
You can pop anything into an accordion panel. To find the panels, locate them on the Elements tree pane, switch to the Style pane and find the settings for height. The panels have the max-height set to 0px, so to edit the contents you need to add some temporary height, and then set it back to zero when done.
Download this component for 'mobile-up'.
Download this component for 'desktop-down'.