CODEWITHSUNDEEP
javascriptjqueryjquery-uiaccordionjquery-ui-accordion
colosso
colosso

Reputation: 2525

Jquery UI Accordion collapse before open

I have a simple Jquery UI accordion with 3 sections. All 3 sections are collapsed in the beginning. When I click on a section header, the section content should show (slide) up. The special thing is now that the section content divs are positioned absolutely over each other. To make it look good I want that the current opened section toggles completely before the animation of showing the next section begins.

This is what I have made to toggle the section it right now: 

      $(function () {
         $("#accordion").accordion({

             create: function (event, ui) {
                 ui.oldPanel.slideToggle("slow");

             },
             collapsible: true,
             active:false

         });
     });

You can see how it looks like on:

http://jsfiddle.net/kqMAR/

It appears that the toggle and show up animation start at the same time. But what I want is to toggle it completely before starting the next slide up.

Upvotes: 1

Views: 2037

Answers (2)

Ankit
Ankit

Reputation: 690

New Answer :

Try this

http://jsfiddle.net/6QJJp/1/

This is what you exactly need

you will need to fix CSS according to you requirement.

Upvotes: 2

Ankit
Ankit

Reputation: 690

   $(function () {
         $("#accordion").accordion({
             animate:{duration:5000},
             collapsible: true,
             active:false
         });
     });

Use above function to understand what is happening actually, new section starts opening as soon as the old section starts closing that's why its giving an illusion of incomplete animation. for complete animation place the buttons one below another then you will be able to see proper animation. If you require horizontal arrangement then you can possibly use fading effect that also looks cool.

Upvotes: 2

Related Questions