drawers with only CSS

by bren

HTML

<acronym>
    <div>
        
        <input id="ac-1" name="accordion-1" type="checkbox" />
        <label for="ac-1">About us</label>
        <section>
            <p>
Some content... Some content... Some content... Some content...  Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content...  </p>
        </section>
        
        
    </div>    

<div>    
      <input id="ac-2" name="accordion-2" type="checkbox" />
     <label for="ac-2">About us</label>   
    <section class="ac-small">
            <p>Some content... </p>
        </section>
       
</div>
</acronym>

CSS

acronym{
    width: 600;
    margin: 10px auto 30px auto;
    text-align: left;
}
acronym label{
    font-family:Arial;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: black;
    line-height: 33px;
    font-size: 19px;
    background: #A8A8A8;
}
acronym label:hover{
    background: red;
}
acronym input:checked + label,
acronym input:checked + label:hover{
	background: red;
	color: black;
}

acronym input{
    display: none;
}
acronym section{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    max-height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
}
acronym section p{
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
 rgba(255,255,255,0.8);
}
acronym input:checked ~ section{
    -webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
acronym input:checked ~ section{
    max-height: 500px; /*auto*/
}