Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    127
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Hiding Div onclick

    Hello,

    I've set up the page to show/hide divs onclick. It works great, except I'm wanting for respond-1 div to show onload. Then if someone clicks on a different menu item (say blogs), I want to hide respond-1.

    Currently, the div loads fine, but when someone clicks on blogs or newshour, etc, the div is still visible. Any ideas?



    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">
    <head>
    <title>Untitled</title>
    <style type="text/css">
    <!--
    #highlights {
    width:	100%;
    font-family: arial, georgia, sans-serif;
    font: normal 14px/17px Arial, sans-serif;
    height: 329px;
    float:left;
    padding: 0;
    background-color: #FFFFFF;
    position: relative;
    }
    
    #highlights #blogs {
    	background-color: #bf2626;
    	height: 35px;
    	padding-left: 46px;
    	width: 100%;
    	float: left;
    }
    
    #highlights #blogs .blog {
    	display: block;
    	float:left;
    	padding: 8px 15px;
    	color: #fff;
    	cursor: pointer;
    
    }
    
    #highlights #blogs .blog_selected {
    	background: #dd5959; 
    	border-top: 1px solid black;
    	color: #FFFFFF;
    	padding: 8px 20px;
    	float: left;
    	display: block;
    	margin-top: -5px;
    	height: 40px;
    	cursor: pointer;
    	}
    
    #highlights #latestnews {
    	float:left;
    	height: 400px;
    	width: 750px;
    	background-color: red;
    	padding-top: 10px;
    	border-radius: 8px;
    	clear: both;
    }
    
    .left-box { 
    float: left;
    width: 220px;
    height: 300px;
     padding-bottom: 1000px;
        margin-bottom: -1000px;
    	background-color: red;
     }
     
    .right-box { 
    float: left;
    width: 500px;
    background-color: purple;
    height: 300px; 
     padding-bottom: 1000px;
        margin-bottom: -1000px;
    	background-color: purple;
     }
    
    -->
    </style>
    
    
    </head>
    <body>
    <script type="text/javascript">
    /* <![CDATA[ */
    
    var current = null;
    
    function showresponddiv(messagedivid){
        var id = messagedivid.replace("message-", "respond-"),
            div = document.getElementById(id);
    
        // hide previous one
        if(current && current != div) {
            current.style.display =  'none';
        }   
    
        if (div.style.display=="none"){
            div.style.display="block";
            current = div;
        } 
        else {
            div.style.display="none";
        }
    }
    
    function changeClass1() {
    			document.getElementById("message-1").className = "blog_selected";
    			document.getElementById("message-2").className = "blog";
    			document.getElementById("message-3").className = "blog";
    			document.getElementById("message-4").className = "blog";
    }
    
    function changeClass2() {
    			document.getElementById("message-2").className = "blog_selected";
    			document.getElementById("message-1").className = "blog";
    			document.getElementById("message-3").className = "blog";
    			document.getElementById("message-4").className = "blog";
    }
    
    function changeClass3() {
    			document.getElementById("message-3").className = "blog_selected";
    			document.getElementById("message-1").className = "blog";
    			document.getElementById("message-2").className = "blog";
    			document.getElementById("message-4").className = "blog";
    }
    function changeClass4() {
    			document.getElementById("message-4").className = "blog_selected";
    			document.getElementById("message-1").className = "blog";
    			document.getElementById("message-2").className = "blog";
    			document.getElementById("message-4").className = "blog";
    }
    /* ]]> */
    </script>
    <div id="highlights">
    	<div id="blogs">
        	<div id="message-1" class="blog_selected" onclick="showresponddiv(this.id); changeClass1();">News</div>
            <div id="message-2" class="blog" onclick="showresponddiv(this.id); changeClass2();">Blogs</div>
            <div id="message-3" class="blog" onclick="showresponddiv(this.id); changeClass3();">Newshour</div>
            <div id="message-4" class="blog" onclick="showresponddiv(this.id); changeClass4();">Days of Dust</div>
     
        </div>
    <div id="respond-1" style=" padding-top: 10px;" class="latestnews">
       <div class="left-box">
                <a target="_blank" href="http://straight2jackie.blogspot.com/"><img width="180" height="53" align="middle" alt="Send your questions and comments to program director Jackie" title="Straight 2 Jackie" src="/filecabinet/folder48/1300802705blog.jpg"/></a></div>
                <div class="right-box">
                <h1 style="text-align: center; ">Politics and The Civil Wars...don't you just love it?</h1>
                <p></p>
                PBS is rerunning their excellent look at the candidates tonight...Mitt Romney and Barack Obama have spent hundreds of millions of dollars to tell their own stories...<br />
                <p><a target="_blank" href="http://straight2jackie.blogspot.com/2012/11/politics-and-civil-warsdont-you-just.html">Straight to Jackie--Continue Reading</a></p>
                <p></p>
     </div>
    <hr />
    </div>
    <div id="respond-2" style="display:none; background-color: #FFFFFF;">
       <div class="left-box">
    </div>
    
    <div class="right-box">
    </div>
    </div>
    <div id="respond-3" style="display:none; background-color: #FFFFFF;">
      <p><!-- Tier 1 NewsHour Video MODULE BEGIN -->	 <script language="JavaScript" src="http://www.pbs.org/newshour/video/modules/legacy/1.js"></script> <!--Tier 1 NewsHour Video MODULE END --></p>
    <!-- Tier 2 NewsHour Video MODULE BEGIN -->	 <script language="JavaScript" src="http://www.pbs.org/newshour/video/modules/legacy/2.js"></script> <!--Tier 2 NewsHour Video MODULE END --> <!-- Tier 3 NewsHour Video MODULE BEGIN --> <script language="JavaScript" src="http://www.pbs.org/newshour/video/modules/legacy/3.js"></script> <!--Tier 3 NewsHour Video MODULE END -->
    </div>
    <div id="respond-4" style="display:none; background-color: #FFFFFF;">
    <div class="left-box">
    <p>Hello</p>
    </div>
    <div class="right-box">
    </div>
    <hr />
    </div>
    </div>
    </body>
    </html>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb

    Not sure of your desired output, but it appears you might simplify JS portion by doing this...
    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">
    <head>
    <title>Untitled</title>
    <style type="text/css">
    #highlights {
      width:	100%;
      font-family: arial, georgia, sans-serif;
      font: normal 14px/17px Arial, sans-serif;
      height: 329px;
      float:left;
      padding: 0;
      background-color: #FFFFFF;
      position: relative;
    }
    
    #highlights #blogs {
      background-color: #bf2626;
      height: 35px;
      padding-left: 46px;
      width: 100%;
      float: left;
    }
    
    #highlights #blogs .blog {
      display: block;
      float:left;
      padding: 8px 15px;
      color: #fff;
      cursor: pointer;
    }
    
    #highlights #blogs .blog_selected {
      background: #dd5959; 
      border-top: 1px solid black;
      color: #FFFFFF;
      padding: 8px 20px;
      float: left;
      display: block;
      margin-top: -5px;
      height: 40px;
      cursor: pointer;
    }
    
    #highlights #latestnews {
      float:left;
      height: 400px;
      width: 750px;
      background-color: red;
      padding-top: 10px;
      border-radius: 8px;
      clear: both;
    }
    
    .left-box { 
      float: left;
      width: 220px;
      height: 300px;
      padding-bottom: 1000px;
      margin-bottom: -1000px;
      background-color: red;
     }
     
    .right-box { 
    float: left;
      width: 500px;
      background-color: purple;
      height: 300px; 
      padding-bottom: 1000px;
      margin-bottom: -1000px;
      background-color: purple;
    }
    </style>
    
    </head>
    <body>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=281453
    
    /* <![CDATA[ */
    
    var current = null;
    
    function showresponddiv(info){
      for (var i=1; i<=4; i++) { document.getElementById("respond-"+i).style.display = 'none'; }
      document.getElementById("respond-"+info).style.display = 'block';
    }
    
    function changeClass(info) {
      for (var i=1; i<=4; i++) { document.getElementById("message-"+i).className = "blog"; }
      document.getElementById("message-"+info).className = "blog_selected";
    }
    
    /* ]]> */
    </script>
    <div id="highlights">
     <div id="blogs">
      <div id="message-1" class="blog_selected" onclick="showresponddiv(1); changeClass(1)">News</div>
      <div id="message-2" class="blog" onclick="showresponddiv(2); changeClass(2)">Blogs</div>
      <div id="message-3" class="blog" onclick="showresponddiv(3); changeClass(3)">Newshour</div>
      <div id="message-4" class="blog" onclick="showresponddiv(4); changeClass(4)">Days of Dust</div>
     </div>
    
     <div id="respond-1" style=" padding-top: 10px;" class="latestnews">
      <div class="left-box">
       <a target="_blank" href="http://straight2jackie.blogspot.com/">
        <img width="180" height="53" align="middle" alt="Send your questions and comments to program director Jackie"
         title="Straight 2 Jackie" src="/filecabinet/folder48/1300802705blog.jpg"/>
       </a>
      </div>
      <div class="right-box">
       <h1 style="text-align: center; ">Politics and The Civil Wars...don't you just love it?</h1>
       <p>&nbsp;</p>
       PBS is rerunning their excellent look at the candidates tonight
       ...Mitt Romney and Barack Obama have spent hundreds of millions of dollars to tell their own stories...<br />
       <p><a target="_blank" href="http://straight2jackie.blogspot.com/2012/11/politics-and-civil-warsdont-you-just.html">
           Straight to Jackie--Continue Reading</a>
       </p>
       <p>&nbsp;</p>
      </div>
      <hr />
     </div>
    
     <div id="respond-2" style="display:none; background-color: #FFFFFF;">
      <div class="left-box"> </div>
      <div class="right-box"></div>
     </div>
    
     <div id="respond-3" style="display:none; background-color: #FFFFFF;">
      <p><!-- Tier 1 NewsHour Video MODULE BEGIN -->
    <script type="text/javascript" src="http://www.pbs.org/newshour/video/modules/legacy/1.js"></script>
    <!--Tier 1 NewsHour Video MODULE END --></p>
    <!-- Tier 2 NewsHour Video MODULE BEGIN -->
    <script type="text/javascript" src="http://www.pbs.org/newshour/video/modules/legacy/2.js"></script>
    <!--Tier 2 NewsHour Video MODULE END --> 
    <!-- Tier 3 NewsHour Video MODULE BEGIN --> 
    <script type="text/javascript" src="http://www.pbs.org/newshour/video/modules/legacy/3.js"></script>
    <!--Tier 3 NewsHour Video MODULE END -->
     </div>
    
     <div id="respond-4" style="display:none; background-color: #FFFFFF;">
      <div class="left-box">
       <p>Hello</p>
      </div>
      <div class="right-box"></div>
      <hr />
     </div>
    </div>
    
    </body>
    </html>

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Or keep it simpler and even make the JS code "unobtrusive":

    Changes marked in red, except the JS code is all new and so unmarked.

    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">
    <head>
    <title>Untitled</title>
    <style type="text/css">
    #highlights {
      width:	100%;
      font-family: arial, georgia, sans-serif;
      font: normal 14px/17px Arial, sans-serif;
      height: 329px;
      float:left;
      padding: 0;
      background-color: #FFFFFF;
      position: relative;
    }
    
    #highlights #blogs {
      background-color: #bf2626;
      height: 35px;
      padding-left: 46px;
      width: 100%;
      float: left;
    }
    
    #highlights #blogs div {
      display: block;
      float:left;
      padding: 8px 15px;
      color: #fff;
      cursor: pointer;
    }
    
    #highlights #blogs .blog_selected {
      background: #dd5959; 
      border-top: 1px solid black;
      color: #FFFFFF;
      padding: 8px 20px;
      float: left;
      display: block;
      margin-top: -5px;
      height: 40px;
      cursor: pointer;
    }
    
    #highlights #latestnews {
      float:left;
      height: 400px;
      width: 750px;
      background-color: red;
      padding-top: 10px;
      border-radius: 8px;
      clear: both;
    }
    
    .left-box { 
      float: left;
      width: 220px;
      height: 300px;
      padding-bottom: 1000px;
      margin-bottom: -1000px;
      background-color: red;
     }
     
    .right-box { 
    float: left;
      width: 500px;
      background-color: purple;
      height: 300px; 
      padding-bottom: 1000px;
      margin-bottom: -1000px;
      background-color: purple;
    }
    </style>
    
    </head>
    <body>
    <div id="highlights">
     <div id="blogs">
       <!-- no onclicks in these, at all -->
      <div id="message-1" class="blog_selected">News</div>
      <div id="message-2">Blogs</div>
      <div id="message-3">Newshour</div>
      <div id="message-4">Days of Dust</div>
     </div>
    
     <div id="respond-1" style=" padding-top: 10px;" class="latestnews">
      <div class="left-box">
       <a target="_blank" href="http://straight2jackie.blogspot.com/">
        <img width="180" height="53" align="middle" alt="Send your questions and comments to program director Jackie"
         title="Straight 2 Jackie" src="/filecabinet/folder48/1300802705blog.jpg"/>
       </a>
      </div>
      <div class="right-box">
       <h1 style="text-align: center; ">Politics and The Civil Wars...don't you just love it?</h1>
       <p>&nbsp;</p>
       PBS is rerunning their excellent look at the candidates tonight
       ...Mitt Romney and Barack Obama have spent hundreds of millions of dollars to tell their own stories...<br />
       <p><a target="_blank" href="http://straight2jackie.blogspot.com/2012/11/politics-and-civil-warsdont-you-just.html">
           Straight to Jackie--Continue Reading</a>
       </p>
       <p>&nbsp;</p>
      </div>
      <hr />
     </div>
    
     <div id="respond-2" style="display:none; background-color: #FFFFFF;">
      <div class="left-box"> </div>
      <div class="right-box"></div>
     </div>
    
     <div id="respond-3" style="display:none; background-color: #FFFFFF;">
      <p><!-- Tier 1 NewsHour Video MODULE BEGIN -->
    <script type="text/javascript" src="http://www.pbs.org/newshour/video/modules/legacy/1.js"></script>
    <!--Tier 1 NewsHour Video MODULE END --></p>
    <!-- Tier 2 NewsHour Video MODULE BEGIN -->
    <script type="text/javascript" src="http://www.pbs.org/newshour/video/modules/legacy/2.js"></script>
    <!--Tier 2 NewsHour Video MODULE END --> 
    <!-- Tier 3 NewsHour Video MODULE BEGIN --> 
    <script type="text/javascript" src="http://www.pbs.org/newshour/video/modules/legacy/3.js"></script>
    <!--Tier 3 NewsHour Video MODULE END -->
     </div>
    
     <div id="respond-4" style="display:none; background-color: #FFFFFF;">
      <div class="left-box">
       <p>Hello</p>
      </div>
      <div class="right-box"></div>
      <hr />
     </div>
    </div>
    
    <script type="text/javascript">
    /* <![CDATA[ */
    
    (
      function( )
      {
          // get the collection of "message-N" divs:
          var clickons = document.getElementById("blogs").getElementsByTagName("div");
          for ( var c = 0; c < clickons.length; ++c ) 
          {
              // attach an onclick even to each one
              clickons[c].onclick = 
                  function( )
                  {
                       // get just the number of the message-N
                      var target = this.id.replace("message-","");
                      for ( var n = 1; n <= clickons.length; ++n )
                      {
                           // hide all but the respond-N that matched clicked on message-N
                          document.getElementById("respond-" + n ).style.display =  
                              ( n == target ) ? "block" : "none";
                          // remove the blog_selected from all but clicked on one
                          document.getElementById("message-" + n ).className = 
                              ( n == target ) ? "blog_selected" : "";
                      }
                  }
          }
      }
    )( ); // self-invoke the master anonymous function, so all the code there 
          // remains invisible to any JS code outside the anonymous function
    /* ]]> */
    </script>
    
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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