Accordion Toggle using ID

[daverobbo]

Hi,

 

I am trying to create an accordion toggle for a website I am developing, at the moment I have a basic script that simply toggles different divs based on the ID it has been assigned.

 

Here is the Javascript:

 

$(document).ready(function() {

$('.toggle-container ').hide().first().show();

 

$('.toggle-link').click(function(event){

event.preventDefault();

$($(this).attr('href')).toggle(100);

 

});

 

});

 

and here is the html I am using with this

 

General Information

 

 

Ok the question is how can I modify my current code so that when I click on one link one div opens and the other closes? I have a lot of information to display so I really need to get this sorted.

 

I am guessing I need to add a class or if at all possible add to the id and remove it when another is clicked but as I am very new to javascript I don't know how to do this and I couldn't find anything on google been stuck on this for a few hours

 

Thanks

[webman]

Hide all the others first, before opening the one you want to show. Something like this...

 

$("div.text-container div").hide();
$($(this).attr('href')).toggle(100);

 

Have you considered using jQuery UI's Accordion widget instead though?