Accordion

Accordions are simple content blocks that expands or contracts on toggle. They can be used to hide extra optional information, or to build a step wise explaination.

To build an accordion, create a button with accordion class, and immediately create a <div> with -panel class.

For example

<button class="accordion">toggle</button>
<div class="-panel"> Content </div>

Note that you need to include beauter.min.js at the end for the dynamic event triggering. See how here.

You can create nice interactive interfaces using accordions.

Hello this is one more accordion. Very useful for creating process based or choice based stuff.

<button class="accordion _pink _round">Pinkish Round</button>
<div class="-panel _cream">
  <p>Hello this is an accordion. You can put simple text here.</p>
</div>

<button class="accordion _small _yellow">Tiny but worthy</button>
<div class="-panel _yellow">
  <p>Hello this is another accordion. You can also put buttons like</p><button class="_primary">This</button>
</div>

<button class="accordion _box _shadow _dark">Shadow</button>
<div class="-panel">
  <p>Hello this is one more accordion. Very useful for creating process based or choice based stuff.</p><img src="/img/pink.jpg">
</div>