How can I create a vertical accordion menu with smooth Javascript transitions?

Question

I am currently attempting to create a vertical accordion menu that can slide open and closed smoothly using Javascript.

Currently the javascript code I have been using looks like this:

$(document).ready(function(){
  $(".btn1").click(function(){
    $(".expand1").slideToggle('slow', "swing", function () {
  });
});

$(".btn2").click(function(){
  $(".expand2").slideToggle('slow', "swing", function () {
   });
}); 

My HTML:

<tr class="btn1">
   TITLE HERE
</tr>
<tr>
<td class="expand1">
   TEXT GOES HERE   
</td>
</tr>

But I have found that this code makes for a very choppy opening and closing transition.

Is there another code out there that will allow for a smoother transition?

Answer 1

You may be want something like that.

 jQuery(".box h1").click(function(){ if ( jQuery(this).parent().hasClass("open") ) { jQuery(".box").removeClass("open"); } else { jQuery(".box").removeClass("open"); jQuery(this).parent().addClass("open"); } }); 

 #accordeon { width:300px; background:red; } .box { max-height:50px; text-align:center; overflow:hidden; transition: all 1s; } .box.open { max-height:500px; } .box h1 { height:50px; line-height:50px; margin:0; padding:0; } .box p { padding: 50px 0; background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="accordeon"> <div class="box"> <h1> Title </h1> <p>Lorem ipsum</p> </div> <div class="box"> <h1> Title </h1> <p>Lorem ipsum</p> </div> </div>