www.webdeveloper.com
Results 1 to 4 of 4

Thread: Hide/Show Toggle DIVs

  1. #1
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24

    Question Hide/Show Toggle DIVs

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

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,683
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    May 2012
    Location
    Hays, KS
    Posts
    24
    You rule vwphillips.

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

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,683
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles