<div id="a01" class="bl_accordionBlock">
  <div class="bl_accordionBlock_inner">
  <h2 class="bl_accordionBlock_head"><a href="#a01">Click</a></h2>
  <div class="bl_accordionBlock_detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa qui nostrum voluptatum est enim sit, quisquam, laboriosam perspiciatis consectetur. Dignissimos ducimus porro, eligendi voluptatibus veritatis ut laudantium impedit iure omnis!</div>
    </div>
</div>

<div id="a02" class="bl_accordionBlock">
  <div class="bl_accordionBlock_inner">
  <h2 class="bl_accordionBlock_head"><a href="#a02">Click</a></h2>
  <div class="bl_accordionBlock_detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa qui nostrum voluptatum est enim sit, quisquam, laboriosam perspiciatis consectetur. Dignissimos ducimus porro, eligendi voluptatibus veritatis ut laudantium impedit iure omnis!</div>
    </div>
</div>

<div id="a03" class="bl_accordionBlock">
  <div class="bl_accordionBlock_inner">
  <h2 class="bl_accordionBlock_head"><a href="#a03">Click</a></h2>
  <div class="bl_accordionBlock_detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa qui nostrum voluptatum est enim sit, quisquam, laboriosam perspiciatis consectetur. Dignissimos ducimus porro, eligendi voluptatibus veritatis ut laudantium impedit iure omnis!</div>
    </div>
</div>

<div id="a04" class="bl_accordionBlock">
  <div class="bl_accordionBlock_inner">
  <h2 class="bl_accordionBlock_head"><a href="#a04">Click</a></h2>
  <div class="bl_accordionBlock_detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa qui nostrum voluptatum est enim sit, quisquam, laboriosam perspiciatis consectetur. Dignissimos ducimus porro, eligendi voluptatibus veritatis ut laudantium impedit iure omnis!</div>
    </div>
</div>
.bl_accordionBlock{
  width: 90%;
  margin: 0 auto;
  padding: 1%;
  border-bottom: 3px solid #ddd;
  background-color: #5cb531;
  
  &_inner{
    padding: 1%;
    background-color: #fff;
  }
  
  &_head{
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #222;
    transition: margin .3s ease-in;
    
    a{
      display: block;
      text-decoration: none;
      color: #222;
      font-size: 24px;
    }
    
    & + div{
    height: 0;
    overflow: hidden;
    transition: all .3s ease-in-out;
    }
    
  }
  &:target{ 
    
    h2{
      margin: 0 0 10px;
      
    }
    h2 + div{
    height: 100px;
  }
    
  }
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.