SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    67 Post(s)
    Tagged
    2 Thread(s)

    Hide Div on click

    So basically I want to make a side navigation that has a button that can hide the whole layer (making more room for text).

    Saw it done before but forget how it was done. More info:

    Along the side of that div is the button to hide the div, i know that that will be in its own div, that will have a script to hide (or somehow change a value in the css) to make the side bar and its conetent not visible.

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Florida
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You would need javascript to hide it.
    HTML Code:
    <script language="javascript" type="text/javascript">
    	function toggleLayer(whichLayer)
    	{
    	if (document.getElementById)
    	{
    		// this is the way the standards work
    		var style2 = document.getElementById(whichLayer).style;
    		style2.display = style2.display? "":"block";
    	}
    	}
    </script>
    This is how to use it:
    HTML Code:
    <a href="javascript:toggleLayer('divid');">Show/Hide</a>
    
    <div id="divid">
    Text
    </div>

  3. #3
    Always A Novice bronze trophy
    K. Wolfe's Avatar
    Join Date
    Nov 2003
    Location
    Columbus, OH
    Posts
    2,182
    Mentioned
    67 Post(s)
    Tagged
    2 Thread(s)
    Not working for some reason...

  4. #4
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this
    Code:
      
    <script language="javascript" type="text/javascript">
    	function toggleLayer(whichLayer)
    	{
    	if (document.getElementById)
    	{
    		// this is the way the standards work
    	var e = document.getElementById(whichLayer)
            e.style.display = e.style.display == "none" ? "block":"none";
    	}
    	}
    </script>
    
    <a href="javascript:toggleLayer('divid');">Show/Hide</a>
    
    <div id="divid">
    Text
    </div>

  5. #5
    SitePoint Member
    Join Date
    Dec 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    You could use the prototype lib

    Using prototype lib from(http://script.aculo.us/) will be an esay way to get advanced javascripts on your site.

    Link to the scripts in the head of your document:

    Code:
    <script src="javascripts/prototype.js" type="text/javascript"></script>
    <script src="javascripts/scriptaculous.js" type="text/javascript"></script>
    To hide a DIV:

    ---- HTML ---
    <div id=test></div>
    ---------------

    ---- javascript code ----
    Code:
    function hide_test_div(){
      Element.hide('test');
    }
    ---------------------------
    Watisfy - Weight Control Made Easy
    Ruby on rails and Ajax
    http://www.watisfy.com/
    Quanjumps Team, HM, NZ.


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
  •