CODEWITHSUNDEEP
javascriptjqueryslidetoggle
Pieter
Pieter

Reputation: 9

Closing opened div with jQuery slideToggle

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/

Upvotes: 0

Views: 892

Answers (3)

Dalen
Dalen

Reputation: 8986

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;

Upvotes: 1

Pehmolelu
Pehmolelu

Reputation: 3564

You are using 'a' selector to select ALL links in your page. And you return false, which makes all those links disabled. I suggest wrapping the links with div element and give it id or class and then attach the event to just those links.

What you are building is quite close to Accordion http://jqueryui.com/demos/accordion/ . Maybe thats what you want?

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

Take a look at this

http://jsfiddle.net/NkX2Z/2/

Upvotes: 0

Related Questions