CODEWITHSUNDEEP
jqueryjquery-ui
Al_
Al_

Reputation: 2509

Jquery UI - Show/close accordian tabs separately

I'm trying to set up an accordian style list of tabs where I can open multiple tabs at the same time. Basically I want it to work like here: http://jqueryui.com/demos/accordion/ under the docs at the bottom when you look at the options tab it lists disable, active, etc you can open one or all the tabs.

I can't see how you can set an accordian to do this, so I've done a basic version with a toggle that works, but I have to manually enter the id of each tab to open/close. I'm sure there's a more efficient way to do this so it scales for any number of items, could someone please tell me what that is...

<style>
.newClass { display: none }
</style>
<script>
$(function() {
    $( "#button-1" ).click(function() {
        $( "#effect-1" ).toggleClass( "newClass", 1000 );
        return false;
    });
    $( "#button-2" ).click(function() {
        $( "#effect-2" ).toggleClass( "newClass", 1000 );
        return false;
    });
});
</script>

<a href="#" id="button-1" class="ui-state-default ui-corner-all">Run Effect 1</a>
<div id="effect-1" class=" ui-corner-all">
        Toggle1
</div>

<a href="#" id="button-2" class="ui-state-default ui-corner-all">Run Effect 2</a>
<div id="effect-2" class=" ui-corner-all">
        Toggle 2 
</div>

Bonus points if any one can show how to animate it to slide up/down when you click the buttons

Upvotes: 0

Views: 317

Answers (1)

Kenny Saunders
Kenny Saunders

Reputation: 26

You just need to set a generic class for all the toggles on your page.

I used .next() to toggle whatever is right after the . You could change this to be a class or anything else.

Here's a demo: http://jsfiddle.net/gZBDK/

Here's some more info on next(): http://api.jquery.com/next/

Upvotes: 1

Related Questions