Hey all,
I'm trying to show one div and hide all other divs when an item on the menu is clicked. I found a similar script online and made some adjustments, but it's not working. Any ideas?
Secondly, when an item is selected, I'm trying to change the class as well. For example, when someone clicks on "A Public View," I want the background color to change just to show "A Public View" is selected. I obviously did it wrong, as it's not working. I'm sure it's an idiotic mistake. Thanks
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<latestnews.length; x++) {
name = latestnews[x].getAttribute("class");
if (name == 'latestnews') {
if (latestnews[x].id == thechosenone) {
latestnews[x].style.display = 'block';
}
else {
latestnews[x].style.display = 'none';
}
}
}
}
</script>
<style type="text/css">
<!--
#home_highlights {
width: 785px;
height:445px;
background-color: #FFFFFF;
color: white;
padding-left: 46px;
}
#blogs {
width: 785px;
height: 35px;
background-color: #bf2626;
color: white;
border: 1px solid black;
padding-left: 46px;
}
#blogs .highlights_bar li {
list-style: none;
float: left;
display: inline;
padding-left: 20px;
padding-top: 5px;
}
#blogs .highlights_bar li a {
color: #FFFFFF;
text-decoration: none;
font-size: 20px;
}
.latestnews1 {
display: none;
}
.latestnews2 {
display: none;
}
.latestnews3 {
display: none;
}
.latestnews4 {
display: none;
}
.blog [
display: block;
float:left;
padding: 8px 15px;
color: #fff;
cursor: pointer;
}
#home_highlights #blog .blog_selected {
background: #df6161;
border-top: 5px solid black;
color: #E5695D;
padding: 8px 20px;
float: left;
display: block;
margin-top: -5px;
height: 40px;
}
-->
</style>
<div id="home_highlights">
<div id="blogs">
<ul class="highlights_bar">
<li><a href="#" onclick="showonlyone('latestnews1');">Straight 2 Jackie</a></li>
<li><a href="#" onclick="showonlyone('latestnews2');">A Public View</a></li>
<li ><a href="#" onclick="showonlyone('latestnews3');">Hilary's Double Take</a></li>
<li><a href="#" onclick="showonlyone('latestnews4');">Newshour</a></li>
</ul>
</div>
<div id="latestnews">
<div class="latestnews1">
<p>Test 1</p>
<hr />
</div>
<div class="latestnews2">
<p>test 2</p>
<hr />
</div>
<div class="latestnews3">
<p>Test 3</P>
</div>
<div class="latestnews4">
<p>Test 4</P>
</div>
</div>
</div>
</body>
</html>
Before you post, read our: 
