Hide/Show Toggle DIVs

**Tibneo** · 07-03-2012 07:40 PM

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>

And my style:

Code:

#categoryhold {
	width: auto;
	height: auto;
}
#category1 {
	display: none;
}
#category2 {
	display: none;
}
#category3 {
	display: none;
}
#category4 {
	display: none;
}
#category5 {
	display: none;
}

**vwphillips** · 07-04-2012 06:24 AM

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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#categoryhold {
	width: auto;
	height: auto;
}
#category1 {
	display: none;
}
#category2 {
	display: none;
}
#category3 {
	display: none;
}
#category4 {
	display: none;
}
#category5 {
	display: none;
}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

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>

**Tibneo** · 07-04-2012 02:58 PM

You rule vwphillips.

Is there a way to smoothen it out? Like change the speed of the hide/show to slow?

**vwphillips** · 07-05-2012 04:33 AM

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" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/

#categoryhold {
	width: auto;
	height: auto;
}
#category1 {
	display: none;
}
#category2 {
	display: none;
}
#category3 {
	display: none;
}
#category4 {
	display: none;
}
#category5 {
	display: none;
}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

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';
  }
 }

}


zxcAccordian.init('category',1000);

/*]]>*/
</script></body>

</html>

Thread: Hide/Show Toggle DIVs

Thread Tools

Display

Hide/Show Toggle DIVs

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions