SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keep First Menu Expanded On Load

    How do I keep the first one open(expanded) when page loads?

    Upon loading they both are collapsed. I need the first one expanded.

    Thanks

    Code:
     <dt><a href="#nogo">Normal Health</a></dt>
                <dd>
                  <ul>
                    <li>Something goes here</li>
                    <li>Something goes here</li>
                    <li>Something goes here</li>
                    <li>Something goes here</li>  
                  </ul>
                </dd>
                <dt><a href="#nogo">Acceptable Air</a></dt>
                <dd>
                  <ul>
                    <li>Something goes here</li>
                    <li>Something goes here</li>
                    <li>Something goes here</li>
                    <li>Something goes here</li>  
                  </ul>
                </dd>
              </dl>
    Code:
    // Expand / Contract
    	if ($("dl.collapse").length > 0) {
    	
    		$("dl.collapse dd").hide();
    		
    	  	$("dl.collapse dt").click(
    			function() {
    				$(this).toggleClass("closed").next("dd").slideToggle();
    				return false;
    			}
    		);
    		
    		var expanded_dt = getParameterByName("dt_e");
    		if (expanded_dt) {
    			$("dt#" + expanded_dt).toggleClass("closed").next("dd").slideToggle();
    		}
    	}
    
    	// Resize fine print
    	if ($("a.zoom-in").length > 0) {
    		
    		var fontSizeCurrent = -2;
    		var fontSizeMax = 2;
    		
    		$("a.zoom-in").click(
    			function() {			
    				if (fontSizeCurrent < fontSizeMax) {
    					fontSizeCurrent++;
    					changeFontSize(fontSizeCurrent);
    				}
    				
    				return false;	
    			}
    		);	
    		
    	}
    I tried: ) if ($("dl.collapse").length > 0) .not(":first").find("+ ul").slideUp(1);
    combing code I saw elsewhere. Obviously I was wrong.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by lukkas View Post
    How do I keep the first one open(expanded) when page loads?

    Upon loading they both are collapsed. I need the first one expanded.
    This hides all of them;

    Code:
    $("dl.collapse dd").hide();
    This hides all except for the first one.

    Code javascript:
    $("dl.collapse dd:not(:first)").hide();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    339
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    This hides all of them;

    Code:
    $("dl.collapse dd").hide();
    This hides all except for the first one.

    Code javascript:
    $("dl.collapse dd:not(:first)").hide();
    Excellent. It works both in IE and Firefox. Although, now the first menu that stays expanded now shows a plus sign all the time (even when closed). I'll try and work this out.
    Thank you!

    PS: just so many things to study about when you want to some design. Someone said some version of javascript were depricated the ...find> part I guess.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by lukkas View Post
    Although, now the first menu that stays expanded now shows a plus sign all the time (even when closed). I'll try and work this out.
    An alternative option (which I think may be preferred) is to trigger the collapse click event on the first one, just after you define that click event.
    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
  •