Demo

Download

---

A pure HTML/CSS accordion component that uses CSS3 transitions for smooth animations when expanding/collapsing.

How to use it:

The basic html structure for the accordion. In this case, we’re going to use html checkbox and label for the toggles.

<div class="block">
  <div>
    <input type="radio" name="item" id="item-one" checked hidden />
    <label for="item-one">Item 1</label>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p>
    </div>
  </div>
  <div>
    <input type="radio" name="item" id="item-two" hidden />
    <label for="item-two">Item 2</label>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p>
    </div>
  </div>
  <div>
    <input type="radio" name="item" id="item-three" hidden />
    <label for="item-three">Item 3</label>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p>
    </div>
  </div>
  <div>
    <input type="radio" name="item" id="item-four" hidden />
    <label for="item-four">Item 4</label>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p>
    </div>
  </div>
  <div>
    <input type="radio" name="item" id="item-five" hidden />
    <label for="item-five">Item 5</label>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p>
    </div>
  </div>
</div>