Creating A Stylish Accordion Menu with Pure CSS

Preview:

Description:

In this post we’re going to creating a stylish accordion menu that allows you to toggle hidden panels by clicking the title bar.

How to use it:

Markup Html structure.

<div class="togglebox">
  <div>
    <input id="radio1" type="radio" name="toggle" checked="checked"/>
    <label for="radio1">Title 1</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
  <div>
    <input id="radio2" type="radio" name="toggle"/>
    <label for="radio2">Title 2</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
  <div>
    <input id="radio3" type="radio" name="toggle"/>
    <label for="radio3">Title 3</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
  <div>
    <input id="radio4" type="radio" name="toggle"/>
    <label for="radio4">Title 4</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
  <div>
    <input id="radio5" type="radio" name="toggle"/>
    <label for="radio5">Title 5</label>
    <div class="content">
      <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p>
      <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p>
    </div>
  </div>
</div>

The CSS/CSS3. Font Awesome 4 is required for toggle arrows.

@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css");

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

:before,
:after {
 content: '';
 display: block;
 position: absolute;
 box-sizing: border-box;
}

html,
body {
 height: 100%;
 font: 16px/1 'Open Sans', sans-serif;
 color: #555;
 background: #4a6a8a;
}

body {
 padding: 50px;
}

.togglebox {
 width: 300px;
 height: 400px;
 margin: 0 auto;
 background: #3c566f;
}

input[type="radio"] {
 position: absolute;
 opacity: 0;
}

label {
 position: relative;
 display: block;
 height: 50px;
 line-height: 50px;
 padding: 0 20px;
 font-size: 14px;
 font-weight: bold;
 color: rgba(255, 255, 255, 0.5);
 background: #2e4155;
 cursor: pointer;
}

label:hover {
 background: #1f2d3a;
}

label:after {
 content: '\f078';
 top: 0px;
 right: 20px;
 font-family: fontawesome;
}

.content {
 height: 0;
 overflow: hidden;
}

input[type="radio"]:checked ~ label {
 color: rgba(255, 255, 255, 0.8);
}

input[type="radio"]:checked ~ label:after {
 transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -webkit-transform: rotate(90deg);
}

input[type="radio"]:checked ~ .content {
 height: 150px;
}

p {
 margin: 15px 0;
 padding: 0 20px;
 font-size: 11px;
 line-height: 1.5;
 color: rgba(255, 255, 255, 0.8);
}