Skip navigation
AxiomaticChaos
Currently Being Moderated

How can I set my Jquery Accordion to close when another tab is opened?

Apr 26, 2013 3:58 PM

I have a 3 tab Accordion style set to be my navigation panel on a website I'm building.

 

I want the other tabs to close when another is selected. Can someone help me with the JS coding for that?

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 26, 2013 11:09 PM   in reply to AxiomaticChaos

    @CF McBlob: OP is referring to a 'jQuery' plugin, not Spry. While your support is highly appreciated, please analyze the original questions thoroughly before responding to ensure posters don't get confused.

     

    @AxiomaticChaos: What jQuery plug-in are you using for the 'accordion'? Or have you built one from scratch yourself? Can you post the webpage in question so we can analyse? Or at the very least, post your code.

     

    However, here are 2 great free-to-use jQuery accordion plugins that you could take a look at:

     

    http://www.egrappler.com/a-stylo-modern-jquery-accordion-akordeon/

    http://www.switchroyale.com/vallenato/

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 28, 2013 12:33 AM   in reply to AxiomaticChaos

    Jsfiddle cannot load external references to css or js files. Please use the CSS & Javascript panel there to insert your CSS & JS code.

     

    It'd be best if you could upload this to your webserver and share a link - would be easier for us to troubleshoot.

     

    Also, your fiddle didn't have jQuery enabled - it loads with 'No jQuery (Pure Javascript') mode. A jQuery library is required to run the akordeon plugin.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 28, 2013 6:24 AM   in reply to AxiomaticChaos

    I believe that the behaviour that you are looking for is the default behaviour. The constructor should look like

    $('#id-of-your-accordion').akordeon();

    If you want the third panel to be open as your default you need to add 'expanded' to the division as in

    <div class="akordeon-item expanded">

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points