ansaurus

Question

Jquery Slidetoggle open 1 div and close another

Answer 1

A:

Using slideToggle on a collection of elements is going to open all the closed ones and close all the open ones. Using a class to track which one's opened, and then only sliding the specific ul's that you want opened and closed is probably a better solution. Something like this:

$(".dropdown dt a").click(function() {
    $('ul.opened').slideToggle(200).removeClass('opened');
    $(this).closest("dl").find("dd ul").slideToggle(200).addClass('opened');
    return false; 
});

Personally, I like to use slideUp and slideDown rather than slideToggle. That way I know specifically what's going on.

munch 2010-01-28 19:55:54

It's not actually opening all DIVs when clicked. It opens the appropriate DIV, but when you click on a new DIV it opens but doesn't close the previous DIV. Does that help explain it a bit? Your suggestions have shown me a new possible direction, thank you!

Stephen 2010-01-28 20:07:29

Then the reason it wasn't toggling the opened one was because you were only accessing a specific ul in the DOM (the one closest to the anchor you'd clicked). You need a way of toggling both the opened one and the one you were targeting to get it to work. Glad I could help.

munch 2010-01-28 20:20:42

Thanks again Munch, figured it out and just posted the solution.

Stephen 2010-01-28 21:31:10

Answer 2

A:

Found my solution!

$(".dropdown dt a").click(function() {
  var dropID = $(this).closest("dl").attr("id");

  if ($("#"+dropID+" dd ul.opened").length) { 
    $('ul.opened').slideToggle(200).removeClass('opened');
  } else {
    $('ul.opened').slideToggle(200).removeClass('opened');
    $("#"+dropID+" dd ul").slideToggle(200).addClass('opened');
  }
  return false;     
});

Stephen 2010-01-28 21:30:33

ansaurus

tags:

views:

answers:

Jquery Slidetoggle open 1 div and close another

related questions