With an accordion you can hide and unhide content. Handy to use, for example, with facts topics.
accordion
has-child
accordion-content
<div class="accordion"> <ul> <li class="has-child"> Label 1 </li> <li class="accordion-content"> <p>Contents</p> </li> <li class="has-child"> Label 2 </li> <li class="accordion-content"> <p>Contents</p> </li> </ul> </div>
You can change the colors by using the standard color classes: color-*
(color scheme) and bg-*
(background color scheme )
<div class="accordion"> <ul> <li class="has-child color-blue"> Label 1 </li> <li class="accordion-content bg-blue"> <p>Contents</p> </li> <li class="has-child color-green"> Label 2 </li> <li class="accordion-content bg-green"> <p>Contents</p> </li> </ul> </div>
Another method to hide and unhide a content by clicking a button is accessible by using the toggle-block
class
The button contains the following code:
<button class="button" data-toggle-block="#b1">Text</button>
Where "#b1" is the targid code for the block. You can think of it yourself as long as it matches the receipt code of the block. And if you use multiple blocks in your page, the codes must be unique.
The block contains the following code:
toggle-block
<div class="toggle-block" id="b1"> Contents </div>
So the complete code looks like this:
<button class="button" data-toggle-block="#b1">Text</button> <div class="toggle-block" id="b1"> Contents </div>
Je ziet dat de targidcode ("#b1") dezelfde is als de ontvangscode van het block (id="b1")
You can simply change the color of the button by using the button-*
class. If you want, you can also change the background color of the block section from transparent to a color. Then use the bg-*
class.
<button class="button button-blue" data-toggle-block="#b2">Text</button> <div class="toggle-block bg-blue" id="b2"> Contents </div>