<h1>Accordion / collapsible: </h1>
  <hr> 
  
<div id="main">
  <section class="accordion">
    <div class="accordion-element">
      <input type="checkbox" id="check-2" />
      <label for="check-2">Accordion second item <span class="accordion-indicator"> </span></label>
      <article>
        <h2>Big content</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam dolorem alias numquam? Ipsa voluptate eligendi quasi beatae alias adipisci suscipit id qui temporibus repellendus placeat aperiam magnam sunt, voluptatum explicabo?</p>
        <h2>Blah blah</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam dolorem alias numquam? Ipsa voluptate eligendi quasi beatae alias adipisci suscipit id qui temporibus repellendus placeat aperiam magnam sunt, voluptatum explicabo?</p>
      </article>
    </div>
    <div class="accordion-element">
      <input type="checkbox" id="check-3" />
      <label for="check-3">Accordion third item <span class="accordion-indicator"> </span></label>
      <article>
        <h3>Small content</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem magni quos odio modi sed earum corporis, fugit aspernatur, suscipit voluptatum eaque id omnis sequi nobis esse aliquam quaerat magnam cumque.</p>
      </article>
    </div>
  </section>
</div>
* { font-family: 'Ubuntu', sans-serif;}
h1 { text-align: center; color: darkblue; }
#main {
  max-width: 800px;
  margin: 0 auto;
}
h2, h3 { color: goldenrod; text-align:center; }

.accordion {
  input {
    display: none;
  }
  label {
    font-size: 20px;
    font-weight: 600;
    background: #fefefe;
    border-radius: .25em;
    cursor: pointer;
    display: block;
    margin-bottom: .125em;
    padding: .5em;
    z-index: 20;
    span.accordion-indicator {
      transition: all 0.4s;
      width: 13px;
      height: 13px;
      margin-top: 5px;
      margin-right: 5px;
      display: inline-block;
      border: solid #282828;
      border-width: 0 2.5px 2.5px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      float: right;
    }
  }
  .accordion-element {
    margin-bottom: 5px;
  }
  label:hover, .accordion-element:hover {
    background: #f5f5f5;
  }
  input:checked + label > i{
    transition: all 0.25s;
    &.fa::before, &.fa {
      content: "\f068";
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  input:checked + label {
    background: #f0f0f0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    color: #282828;
    margin-bottom: 0;
    span.accordion-indicator { 
      -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
      transform: rotate(225deg);
      margin-top: 10px;
    }
  }
  article {
    background: #fefefe;
    border-bottom-left-radius: .25em;
    border-bottom-right-radius: .25em;
    border-bottom: 2px solid #f0f0f0;
    border-left: 2px solid #f0f0f0;
    border-right: 2px solid #f0f0f0;
    overflow: hidden;
    z-index: 10;
    transition: max-height .25s;
  }
  input:not(:checked) ~ article {
    max-height: 0;
  }
  input:checked ~ article {
    height: auto;
    max-height: 500px;
    margin-bottom: .125em;

  }
  article p {
    padding: 1em;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.