Javascript toggle with a difference

**GlenStobbs** · 07-27-2010, 12:29 PM

Hi all

I am using a basic JavaScript toggle function to show/hide a series of <div> blocks.

All works fine, but now what I want to do is create a link to toggle all of them,irrespective of whether they are shown or hidden. All should be shown.

The page in question is at: www.pinosolocal.net/catbrowser.asp

The script I am using for the normal toggle is:

Code:

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'none';
    }
    
//-->
</script>

The div's are defined like this:

Code:

<div id="<%=MCat%>" style="display: none">

Any help would be appreciated. I'm no JavaScript fundi, and I've spent too much time on this as it is LOL!

Regards
Glen

**vwphillips** · 07-27-2010, 02:46 PM

you appear to have a solution can only suggest code reduction

Code:

function showAnswer(obj){
 var allDivs=document.getElementById('container').getElementsByTagName('div'), i=0, ad;
 var ud=obj.firstChild.nodeValue=='Expand All Categories';
 while(ad=allDivs[i++]){
  ad.className=='answer_box'?ad.style.display=ud?'block':'none':null;
 }
obj.firstChild.nodeValue=ud?'Collapse All Categories':'Expand All Categories';
}

**GlenStobbs** · 07-27-2010, 03:39 PM

Yes, been playing with snippets I found out and about. This one seems to work, though occasionally [in several browsers], the right hand column does not expand until you re-click the expand link.

I will look at trimming down the code as you suggest.

Many thanks
Glen

**harva** · 08-03-2010, 07:44 AM

hello........ friend

All works fine, but now what I want to do is create a link to toggle all of them,irrespective of whether they are shown or hidden. All should be shown.

Thanks..............

________________---
For connecting to remote desktop of another computer (via internet or network) and controls. Also connecting to VNCServer through Repeater or directly to VNCServer and a lot of other configuration options. For more details VNCServer

**vwphillips** · 08-03-2010, 08:40 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[*/
.answer_box {
  display:none;
}

/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/
function showAll(){
 var allDivs=document.getElementById('container').getElementsByTagName('div'), i=0, ad;
 while(ad=allDivs[i++]){
  if(ad.className=='answer_box'){
   ad.style.display='block';
  }
 }
}
/*]]>*/
</script></head>

<body>
<input type="button" name="" value="Test" onclick="showAll()"/>

<div id="container" >
<div class="answer_box" >1</div>
<div class="answer_box" >2</div>
<div class="answer_box" >3</div>
<div class="answer_box" >4</div>
<div class="answer_box" >5</div>
</div>
</body>

</html>

Thread: Javascript toggle with a difference

Thread Tools

Search Thread

Javascript toggle with a difference

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions