SitePoint Sponsor |
|
User Tag List
Results 1 to 12 of 12
-
Sep 16, 2008, 21:51 #1
- Join Date
- Feb 2003
- Location
- Somewhere in, MD
- Posts
- 400
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
jQuery Accordian Menu behavior help
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?
-
Sep 16, 2008, 22:10 #2
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
It may be a lot easier to make a small change to the code you're already written.
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Sep 17, 2008, 07:15 #3
- Join Date
- Feb 2003
- Location
- Somewhere in, MD
- Posts
- 400
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Sep 17, 2008, 18:32 #4
- Join Date
- Feb 2003
- Location
- Somewhere in, MD
- Posts
- 400
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
so sad, noone knows jquery on here...
-
Sep 17, 2008, 19:00 #5
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
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.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Sep 17, 2008, 19:19 #6
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
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.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Sep 18, 2008, 08:09 #7
- Join Date
- Feb 2003
- Location
- Somewhere in, MD
- Posts
- 400
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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...
-
Sep 18, 2008, 13:52 #8
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
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; });
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Sep 18, 2008, 21:08 #9
- Join Date
- Feb 2003
- Location
- Somewhere in, MD
- Posts
- 400
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Sep 18, 2008, 21:40 #10
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
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; });
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Sep 19, 2008, 11:52 #11
- Join Date
- Feb 2003
- Location
- Somewhere in, MD
- Posts
- 400
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Sep 19, 2008, 20:08 #12
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
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.
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
Bookmarks