jQuery Accordian Menu behavior help

**IJoeR** · Sep 16, 2008, 21:51

I built an accordian menu using jquery. When you click one of the buttons it expands as it should. When you click it again (the same button), it closes and then expands again.

I want it to just close and not re-open again, unless you click it a third time. So, what jQuery command should I use? Do you have some sample code for me pleasE?

**paul_wilkins** · Sep 16, 2008, 22:10

It may be a lot easier to make a small change to the code you're already written.

**IJoeR** · Sep 17, 2008, 07:15

well yeah thats what i was hoping to do.

Here's the code i have below...what part should i change to make it so the box doesn't re-open?

Code:

 
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("dd").hide();
$("span").hide();
$("dt a").click(function () {
$("span").fadeOut(100);
      
 $("dd:visible").slideUp("slow");
 
 $(this).parent().next().slideDown("slow", function () {
  $("span").fadeIn(600);
  });
  return false;   
    });
 return false; 
});
</script>

**IJoeR** · Sep 17, 2008, 18:32

so sad, noone knows jquery on here...

**paul_wilkins** · Sep 17, 2008, 19:00

There are a vast number of frameworks out there so patience is a virtue.

You need to check if the visible dd is not the same as the one that's going to be shown, and I'm looking for jquery ways to nicely do that.

**paul_wilkins** · Sep 17, 2008, 19:19

Here's what you're after.

Code javascript:

$("dt a").click(function () {
	if ($("dd:not:visible") && $("dd:visible").get()[0] !== $(this).parent().next().get()[0]) {
            ....
        }
        return false;
}

There may be other jquery ways of more efficiently doing this, but the above will work as desired.

If you want the content to fade out and in as recognition that it was clicked, then move the fade pieces of code just outside of the if statement.

**IJoeR** · Sep 18, 2008, 08:09

Sorry for sounding stupid, but I am really new to jQuery so I see the code you provided and that is much appreciated for sure, thank you for getting back to me. I been trying to fix this one thing for 2 days and just can't get it to work.

So, now my question is what part of my script should fire after that check occurs? I played around with it a little bit, but it didn't exactly. It left all panels open and nothing would fire when clicked. So...I'm confused here. ugh.

I'm not really a javascript / jquery person...as you can see...

**paul_wilkins** · Sep 18, 2008, 13:52

Here is the full working test code

Code html4strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> 
<head> 
<title>Test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
</head> 
<body> 
<dl>
	<dt><a href="#def1">Term 1</a></dt>
	<dd id="def1">Definition 1</dd>
	<dt><a href="#def2">Term 2</a></dt>
	<dd id="def2">Definition 2</dd>
	<dt><a href="#def3">Term 3</a></dt>
	<dd id="def3">Definition 3</dd>
</dl>
<script src="js/jquery-1.2.6.min.js"> </script>
<script src="js/accordion.js"> </script>
</body> 
</html>

Note, it doesn't matter where the script is placed in this example, but if you do decide to leave it at the bottom then you will get better loading performance by removing the $(document).ready() piece in the code.
See best practices for speeding up your web site

Code javascript:

$(document).ready(function () {
	$("dd").hide();
	$("span").hide();
	$("dt a").click(function () {
		if ($("dd:not:visible") && $("dd:visible").get()[0] !== $(this).parent().next().get()[0]) {
			$("span").fadeOut(100);
			$("dd:visible").slideUp("slow");
			$(this).parent().next().slideDown("slow", function () {
				$("span").fadeIn(600);
			});
		}
		return false;   
    });
	return false; 
});

**IJoeR** · Sep 18, 2008, 21:08

wow, thank you very much for helping out here. This is great. I put it in my file and it well basically almost works completely.

The only thing that doesn't seem to work is when i click a tab and its open, if i click it again, it should close. Right now it doesn't do anything. I will check with my people to see if that works for them or not. I see it in the code the line that tells the dd:visible to slide up but that doesn't fire for some reason.

**paul_wilkins** · Sep 18, 2008, 21:40

Ahh, well that's just as easy to achieve, if not easier.

Code javascript:

$(document).ready(function () {
	$("dd").hide();
	$("span").hide();
	$("dt a").click(function () {
		$("span").fadeOut(100);
		$("dd:visible").slideUp("slow");
		if ($("dd:visible").get()[0] !== $(this).parent().next().get()[0]) {
			$(this).parent().next().slideDown("slow", function () {
				$("span").fadeIn(600);
			});
		}
		return false;   
    });
	return false; 
});

**IJoeR** · Sep 19, 2008, 11:52

Thank you very much!

One last hurdle to cross here:
Now when i mouseover a button, it lights up, when i click a button, it shows the on state, what state would the button be in when you click the same button a second time?

So you click the button once to open it up and show the ACTIVE image, so how can u make it show another image when you close it?

i'm using a different script, but i don't know what state it would be in for the 2nd click?

**paul_wilkins** · Sep 19, 2008, 20:08

This would require access to a test page or some kind, or at least the relevant html and javascript that is being used, so that we can craft a solution specifically for your situation.

The SitePoint Forums have moved.

User Tag List

Thread: jQuery Accordian Menu behavior help

Thread Tools

Display

jQuery Accordian Menu behavior help

Bookmarks

Bookmarks

Posting Permissions