Let's have fun

Let's have fun

Accordion

Info

With an accordion you can hide and unhide content. Handy to use, for example, with facts topics.

The accordion

  • Label 1
  • Label 2
  • Label 3
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>

Colors

You can change the colors by using the standard color classes: color-*(color scheme) and bg-*(background color scheme )

Examples
  • Label 1
  • Label 2
  • Label 3
<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>

Toggle block

Another method to hide and unhide a content by clicking a button is accessible by using the toggle-block class

foto

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")

Colors

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.

foto

<button class="button button-blue" data-toggle-block="#b2">Text</button>

<div class="toggle-block bg-blue" id="b2">
  Contents
</div>