...

View Full Version : Hiding Div onclick



javanewbie7
11-07-2012, 09:19 PM
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?





<!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>

jmrker
11-07-2012, 10:01 PM
Not sure of your desired output, but it appears you might simplify JS portion by doing this...


<!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>

Old Pedant
11-08-2012, 03:25 AM
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.



<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum