Hi everyone. I'm trying to hide/show DIVs, and I believe I've gotten that down. But I'm trying to get it to where once I've shown one div, I want to be able to hide it without having to show another div.
Here's my javascript.
Code:
function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['divID1','divID2','divID3','divID4','divID5'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
Here's my HTML:
Code:
<div id="categoryhold">
<a href="javascript:showHide('category1');">Category 1</a><br />
<div id="category1"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div><br />
<a href="javascript:showHide('category2');">Category 2</a><br />
<div id="category2"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div><br />
<a href="javascript:showHide('category3');">Category 3</a><br />
<div id="category3"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div><br />
<a href="javascript:showHide('category4');">Category 4</a><br />
<div id="category4"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div><br />
<a href="javascript:showHide('category5');">Category 5</a></div>
<div id="category5"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div>
</div>
function showHide(d){
var div = document.getElementById(d);
if (showHide.div&&div!=showHide.div){
showHide.div.style.display='none';
}
div.style.display = div.style.display != 'block'?'block':'none';
showHide.div=div;
}
/*]]>*/
</script>
</head>
<body>
<div id="categoryhold">
<a href="javascript:showHide('category1');">Category 1</a><br />
<div id="category1"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div><br />
<a href="javascript:showHide('category2');">Category 2</a><br />
<div id="category2"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div><br />
<a href="javascript:showHide('category3');">Category 3</a><br />
<div id="category3"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div><br />
<a href="javascript:showHide('category4');">Category 4</a><br />
<div id="category4"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div><br />
<a href="javascript:showHide('category5');">Category 5</a></div>
<div id="category5"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div>
</div>
</body>
</html>
07-04-2012, 02:58 PM
Tibneo
You rule vwphillips.
Is there a way to smoothen it out? Like change the speed of the hide/show to slow?
07-05-2012, 04:33 AM
vwphillips
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
function showHide(d){
var div = document.getElementById(d);
if (showHide.div&&div!=showHide.div){
showHide.div.style.display='none';
}
div.style.display = div.style.display != 'block'?'block':'none';
showHide.div=div;
}
/*]]>*/
</script>
</head>
<body>
<div id="categoryhold">
<a href="javascript:zxcAccordian.toggle('category',0);">Category 1</a><br />
<div id="category1"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div><br />
<a href="javascript:zxcAccordian.toggle('category',1);">Category 2</a><br />
<div id="category2"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div><br />
<a href="javascript:zxcAccordian.toggle('category',2);">Category 3</a><br />
<div id="category3"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div><br />
<a href="javascript:zxcAccordian.toggle('category',3);">Category 4</a><br />
<div id="category4"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div><br />
<a href="javascript:zxcAccordian.toggle('category',4);">Category 5</a></div>
<div id="category5"><a href="#">Content Line 1</a><br />
<a href="#">Content Line 2</a><br />
<a href="#">Content Line 3</a></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Simple Accordian (05-July-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcAccordian={
init:function(id,ms){
var nu=1,div,ary=[];
while (document.getElementById(id+nu)){
div=document.getElementById(id+nu++);
div.style.display='block';
ary.push([div,div.offsetHeight,true,'dly'+nu]);
div.style.overflow='hidden';
div.style.height='0px';
}
this[id]={
ary:ary,
ms:typeof(ms)=='number'?ms:1000
}
},
toggle:function(id,nu){
var o=this[id],t;
if (o&&o.ary[nu]){
if (o.lst&&o.lst!=o.ary[nu]&&o.lst[2]===false){
this.animate(o.lst[0],parseInt(o.lst[0].style.height),0,new Date(),o.ms,o.lst[3]);
o.lst[2]=true;
}
this.animate(o.ary[nu][0],parseInt(o.ary[nu][0].style.height),o.ary[nu][2]?o.ary[nu][1]:0,new Date(),o.ms,o.ary[nu][3]);
o.ary[nu][2]=!o.ary[nu][2];
o.lst=o.ary[nu];
}
},
animate:function(obj,f,t,srt,mS,to){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
obj.style.height=Math.max(now,0)+'px';
}
if (ms<mS){
this[to]=setTimeout(function(){ oop.animate(obj,f,t,srt,mS,to); },10);
}
else {
obj.style.height=t+'px';
}
}
