...

View Full Version : Showing/Hiding Div onlick



javanewbie7
10-30-2012, 10:00 PM
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





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

Spinner
10-30-2012, 10:47 PM
If I may ask, are you using any kind of developer-tools or console when trying this?
Use Chrome, and hit CTRL+SHIFT+J to open one up...

There might be more wrong here, but just what do you think latestnews.length might be?
You have now such variable declared anywhere here...

javanewbie7
10-30-2012, 11:53 PM
yeah, I originally tried newboxes in place of all of the "latestnews", but neither worked. When I use the newboxes and test it in Chrome, I don't get an error, but it doesn't work.

That said, good call on trying it out in the developers tools in chrome. I'm new to JS and always forget about it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum