Posted By

chippper on 07/21/09

Tagged

Versions (?)

Last Edited at 07/21/09 02:40pm

Statistics

Viewed 643 times

Favorited by 2 user(s)

Related snippets

Sliding Div Function

/ Published in: JavaScript

This assumes HTML that looks like this:

<pre><code>
<div id="containing_div">
<div id="div_1" style="background-color:red" class="visible_div">
<p>Test Content 1</p>
</div> 
<div id="div_2" style="background-color:blue">
<p>Test Content 2</p>
</div> 
<div id="div_3" style="background-color:yellow">
<p>Test Content 3</p>
</div> 
</div> 
<ul id="test_buttons">
<li><a href="#" id="div_1_link" onclick="slideDiv('div_1')" class="here">One</a></li>
<li><a href="#" id="div_2_link" onclick="slideDiv('div_2')">Two</a></li>
<li><a href="#" id="div_3_link" onclick="slideDiv('div_3')">Three</a></li>
</ul> 

</code></pre>

And CSS that looks like this:

.hidden_div {
display: none;
}

.visible_div {
display: block;
}

#containing_div {
width: 300px;
background-color: #ddd;
height: 300px;
overflow:hidden;
}
#containing_div div {
width: 300px;
height: 300px;
}

#test_buttons {
background-color: green;
float: left;
padding: 10px 0 10px 0;
}

#test_buttons li {
display:inline;
float: left;
list-style-type:none;
text-align: center;
}
#test_buttons li a {
display: block;
float: left;
width: 50px;
margin-left: 10px;
height: 15px;
background-color: white;
padding: 8px 4px;
}
#test_buttons li a.here {
background-color: orange;
}
#test_buttons li a.not_here{
background-color: white;
}

Change attributes at will, except for display: none or block.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

function slideDiv(divId) { 
	var contDiv = document.getElementById('containing_div'); 
	var divs = contDiv.getElementsByTagName('div'); 
 
            for (var x = 0; x < divs.length; x++){ 
		if (divs[x].id != divId) { 
		   divs[x].className = "hidden_div";
		   document.getElementById(divs[x].id+'_link').className = 'not_here';
		} 
		else if (divs[x].id = divId) { 
		   divs[x].className = "visible_div"; 
		   document.getElementById(divId+'_link').className = 'here';
		} 
	} 
}