0

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

Koala7
  • 1,340
  • 7
  • 41
  • 83

2 Answers2

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/

Mario S
  • 11,715
  • 24
  • 39
  • 47
0

Use animate instead of css to change the height:

http://api.jquery.com/animate/

francadaval
  • 2,451
  • 3
  • 26
  • 36