Question

I’m a JS and jQuery newb so please bear with me. I’ve got this script working somewhat but it doesn’t do exactly what I want it to do and I can’t figure it out. The basic idea is that I click a link and it opens a div using slideToggle. The tricky part is closing a previously opened div before opening a new one, the best that I’ve been able to do is to hide the previous div. Trying to toggle the previous div has not worked presumably because I’m not targeting the div specifically but rather telling it to close all divs before opening the new one. Another issue I’ve run into is links on the same page seem to become disabled, this appears to be due to the “return false” command however I don’t know how to keep the page from scrolling to the top when I click the slide link if I don’t use that command. Thanks for any help.

Here is what I’m working with: http://jsfiddle.net/NkX2Z/

Answer 1

You have to do some more controls in order to make the external link work.

here is my solution, actually i don’t know if it is what you are looking for but maybe it could help you

http://jsfiddle.net/gb9M7/1/

if($("#"+$(this).attr("class")).length && !$("#"+$(this).attr("class")).is(':visible'))

the condition here checks if the div which correspond to the a element exists and, if so, it checks if that div is not already opened.
When the state of the page meets those constraint than the if block is executed.

UPDATE 1

here is the code with slide time:

http://jsfiddle.net/gb9M7/2/

var time = 1200;
.slideUp(time);
.slideDown(time);

UPDATE 2

and here is the improved version which prevend a link to '#' from scrolling the page:

http://jsfiddle.net/gb9M7/3/

if($(this).attr('href') == '#')
   return false;