Menu icon Foundation
Accordion animation

Hello,

Is it possible to add any effects to accordion feature (easing etc...) ? Any suggestions are appreciated.

Thanks...

accordionjseffects

Hello,

Is it possible to add any effects to accordion feature (easing etc...) ? Any suggestions are appreciated.

Thanks...

Randy Morris over 4 years ago

I've found that using a list with radio buttons to be easier and cleaner for creating accordions. Here's a quick example:

<ul class="accordion"> 
  <li><label for="panel1">Label1</label><input id="panel1" type="radio" name="tog"> 
    <div> 
      <!-- content -->
    </div> 
  </li> 
  <li><label for="panel2">Label2</label><input id="panel2" type="radio" name="tog"> 
    <div> 
      <!-- content -->
    </div> 
  </li> 
  <li><label for="panel3">Label3</label><input id="panel3" type="radio" name="tog"> 
    <div> 
      <!-- content -->
    </div> 
  </li> 

</ul>

Then you can add a transition to the div holding the content like this:

.accordion li > div {
    display: none;
    overflow: hidden;
    transition: height 0.3s ease-in-out 0s;

The full page that this code comes from is an FAQ page that I did for the Utah Labor Commission:

http://laborcommission.utah.gov/FAQ/faq_cob.html

Rafi Benkual over 4 years ago

Here's an example http://codepen.io/sandwich/pen/vEXbyx by Michael C.