SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist IJoeR's Avatar
    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?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 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

  3. #3
    SitePoint Evangelist IJoeR's Avatar
    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>

  4. #4
    SitePoint Evangelist IJoeR's Avatar
    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...

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 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

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 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

  7. #7
    SitePoint Evangelist IJoeR's Avatar
    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...

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 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

  9. #9
    SitePoint Evangelist IJoeR's Avatar
    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.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 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

  11. #11
    SitePoint Evangelist IJoeR's Avatar
    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?

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •