| javanewbie7 |
11-07-2012 08:19 PM |
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>
|
