CODEWITHSUNDEEP
jqueryaccordiondurationjsfiddle
Koala7
Koala7

Reputation: 1404

How to configure the speed option in my accordion

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

Upvotes: 0

Views: 165

Answers (2)

Mario S
Mario S

Reputation: 11945

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/

Upvotes: 1

francadaval
francadaval

Reputation: 2481

Use animate instead of css to change the height:

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

Upvotes: 0

Related Questions