Question

I have created a script to make my div expandable.

$('.expandable').find('h2').on('click', function(){
      $(this).parent().css({height: (parseInt($(this).parent().css('height')) > 50)?'25px':'auto'});
      $(this).find('i').toggleClass('icon-plus-sign icon-minus-sign', 300);
  })

How can i configure the speed or duration of my div expandable, i want it going down slower and smoothly.

Thanks

Here my accordion

Answer 1

How about using slideToggle():

$('.expandable').find('h2').on('click', function(){
      $("#myList").slideToggle('slow');
})

Add an id to the list so we can find it easy:

<ul id="myList">

And hide it from start with css:

#myList {
    display: none;
}

/* And remove the height on the div */
.expandable{
    /*height: 25px;*/
    overflow: hidden;
    width: 200px;
    background-color: #2C2C2C;
    border-radius: 5px;
    color: #fff;
}

See updated: http://jsfiddle.net/JSG9A/2/