YuanUI pattern library

1 #Accordion Accordion

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Displays an accordion element.

Tested on:

  • Chrome 53 on Windows 10
  • Firefox 47 on Windows 10
  • Edge 13 on Windows 10
  • IE 11 on Windows 10
  • IE 10 on Windows 7
  • IE 9 on Windows 7
Example

Without animation

Hello , this is the first div.
Hello , this is the second div.
Hello , this is the third div.
Hello , this is the third div.
Hello , this is the third div.
Hello , this is the third div.
Hello , this is the third div.
Hello , this is the third div.

Animation 1: with a fixed height of 100px

Hello , this is the first div.
Hello , this is the second div.
Hello , this is the third div.
Hello , this is the third div.
Hello , this is the third div.
Hello , this is the third div.
Hello , this is the third div.
Hello , this is the third div.
Markup 
<h2>Without animation</h2>
<div class="accordion">
  <label class="accordion__toggle" for="checkbox1">Hello paragraph 1</label>
  <input type="checkbox" id="checkbox1" class="accordion__hiddeninput" />
  <div class="accordion__drawer">
    Hello , this is the first div.
  </div>
  <label class="accordion__toggle" for="checkbox2">Hello paragraph 2</label>
  <input type="checkbox" id="checkbox2" class="accordion__hiddeninput" />
  <div class="accordion__drawer">
    Hello , this is the second div.
  </div>
  <label class="accordion__toggle" for="checkbox3">Hello paragraph 3</label>
  <input type="checkbox" id="checkbox3" class="accordion__hiddeninput" />
  <div class="accordion__drawer">
    Hello , this is the third div.<br />
    Hello , this is the third div.<br />
    Hello , this is the third div.<br />
    Hello , this is the third div.<br />
    Hello , this is the third div.<br />
    Hello , this is the third div.<br />
  </div>
</div>
<h2>Animation 1: with a fixed height of 100px</h2>
<div class="accordion--fixed-height">
  <label class="accordion__toggle" for="checkbox4">Hello paragraph 1</label>
  <input type="checkbox" id="checkbox4" class="accordion__hiddeninput" />
  <div class="accordion__drawer">
    Hello , this is the first div.
  </div>
  <label class="accordion__toggle" for="checkbox5">Hello paragraph 2</label>
  <input type="checkbox" id="checkbox5" class="accordion__hiddeninput" />
  <div class="accordion__drawer">
    Hello , this is the second div.
  </div>
  <label class="accordion__toggle" for="checkbox6">Hello paragraph 3</label>
  <input type="checkbox" id="checkbox6" class="accordion__hiddeninput" />
  <div class="accordion__drawer">
    Hello , this is the third div.<br />
    Hello , this is the third div.<br />
    Hello , this is the third div.<br />
    Hello , this is the third div.<br />
    Hello , this is the third div.<br />
    Hello , this is the third div.<br />
  </div>
</div>
Source: accordion.css, line 1