Javascript toggle with a difference [Archive]

View Full Version : 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:

<script type="text/javascript">

</script>

The div's are defined like this:

<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

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 (http://www.abtollc.com/VNCViewer.aspx /)

vwphillips

08-03-2010, 08:40 AM

<!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>