www.webdeveloper.com
Results 1 to 3 of 3

Thread: hide and show div

  1. #1
    Join Date
    Mar 2010
    Posts
    14

    Question hide and show div

    hello,
    this is a function to hide and show div
    Code:
    function ToggleMaktoba (titleImg){
    		// the id of the content element from the id of the title element
    	var contentID = titleImg.id.replace (/title/, "content");
    	var contentDiv = document.getElementById (contentID);
    	
    	if (contentDiv.style.display == "none") {
    		titleImg.src = "images/collapse.gif";
    		contentDiv.style.display = "block";
    	}
    	else {
    		titleImg.src = "images/expand.gif";
    		contentDiv.style.display = "none";
    	}
    
    	return false;
    }
    the problem that i have is that this div is viewed on every page on the site,
    so if i hide it i want it to stay hidden even when navigating threw pages. if i choose to hide it, it stays hidden, and if i chose to show it, it stays shown. any help would be wonderful.
    thanks

  2. #2
    Join Date
    Jul 2011
    Posts
    12
    You need to persist this value across the pages. So storing this value in a cookie is the best option, I think. On each page load you would need to check this cookie value and show/hide this div accordingly.

    Also setting the cookie expriy to 0 days will erase the cookie when the browser is closed.

  3. #3
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    function ToggleMaktoba (titleImg,days){
    		// the id of the content element from the id of the title element
    	var contentID = titleImg.id.replace (/title/, "content");
    	var contentDiv = document.getElementById (contentID);
      document.cookie=titleImg.id+'='+contentDiv.style.display+';expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/';
    
    	if (contentDiv.style.display == "none") {
    		titleImg.src = "http://www.vicsjavascripts.org.uk/StdImages/One.gif";
    		contentDiv.style.display = "block";
    	}
    	else {
    		titleImg.src = "http://www.vicsjavascripts.org.uk/StdImages/Two.gif";
    		contentDiv.style.display = "none";
    	}
    
    	return false;
    }
    
    function cookie(nme){
      var re=new RegExp(nme+'[^;]+','i');
      if (document.cookie.match(re)){
       return document.cookie.match(re)[0].split("=")[1];
      }
      return null
     }
    
    function GetCookie(nme,days){
     var img=document.getElementById(nme),div=document.getElementById (img.id.replace (/title/, "content"));
     if (img&&div&&cookie(nme)){
      div.style.display=cookie(nme);
      ToggleMaktoba (img,1);
     }
    }
    
    
    
    /*]]>*/
    </script></head>
    
    <body>
    <img id="title1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="40" height="40" onmouseup="ToggleMaktoba (this,1);"/>
    <div id="content1" style="width:200px;height:200px;background-Color:red;" ></div>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    GetCookie('title1',1);
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles