expand/collpase all instances of this script on a page

Randy Starkey · Aug 19, 2005

Hi,

Can anyone point me in the right direction on this?

Is there a way to expand and collapse all instances of this script on a
single page? The script works well individually. I do the HTML header and
then put buttons all over the page.

Thanks!

--Randy Starkey

---
<script type="text/javascript">
function getElement(id) {
return document.getElementById ?
document.getElementById(id) :
document.all ?
document.all[id] :
null; // no need to fall back on Netscape here
}

function writeMoreButton(id) {
document.write("<input class='moreButton' type='button' value='+'",
" onclick='toggleMore(this,\"", id, "\");'>");
}

function toggleContent(id, visible) {
var elem = getElement(id);
(elem.style||elem).display = visible?"":"none";
}

function toggleMore(button,id) {
var expand = (button.value=="+");
toggleContent(id, expand);
button.value = expand ? "-" : "+";
}
</script>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
<span id="loremMore">Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</span>
<script type="text/javascript">
writeMoreButton("loremMore");
toggleContent("loremMore", false);
</script>
</p>
---

RobG · Aug 19, 2005

Randy said:
Hi,

Can anyone point me in the right direction on this?

Is there a way to expand and collapse all instances of this script on a
single page? The script works well individually. I do the HTML header and
then put buttons all over the page.

Give all the spans you want to hide & show the same class - elements can
have multiple class names and the name does not have to appear in a
style sheet anywhere.

Create an array of references to them onload, then you can hide or show
them all by looping through the array and changing the display attribute.

You could do the same with the buttons to change toggle the value
between '+' and '-'. The same function can do the initial hiding of
the spans so you don't need to call toggleContent()from each script.

Say you give all the spans you want to show or hide a class of
'showHide', then you need something like:

var cCollection = [];

function makeClassArray ( nName, cName ) {
if ( ! document.getElementsByTagName ||
! document.body.style ) return;
var el, els = document.getElementsByTagName( nName );
var i = els.length;
var re = new RegExp('\\b' + cName + '\\b' );
while ( i-- ) {
el = els;
if ( el.className && re.test(el.className) ){
cCollection.push( el );
el.style.display = 'none';
}
}
}

function showHide( v ){
var i = cCollection.length;
while ( i-- ) {
cCollection.style.display = v;
}
}

....

<body onload="makeClassArray( 'span', 'showHide' );">

....

<input type="button" value="Show all" onclick="
showHide('');
">
<input type="button" value="Hide all" onclick="
showHide('none');
">

You may want to include support for document.all also. A similar method
can be used to toggle the button values between '+' and '-', or you
could try to associate the button with the span some other way so that
the value is toggled by a function when the span is shown/hidden.

[...]

Randy Starkey · Aug 19, 2005

Rob - Thanks! Makes sense.

--Randy

RobG said:
Randy said:

Hi,

Can anyone point me in the right direction on this?

Is there a way to expand and collapse all instances of this script on a
single page? The script works well individually. I do the HTML header
and then put buttons all over the page.

Click to expand...

Give all the spans you want to hide & show the same class - elements can
have multiple class names and the name does not have to appear in a style
sheet anywhere.

Create an array of references to them onload, then you can hide or show
them all by looping through the array and changing the display attribute.

You could do the same with the buttons to change toggle the value between
'+' and '-'. The same function can do the initial hiding of the spans so
you don't need to call toggleContent()from each script.

Say you give all the spans you want to show or hide a class of 'showHide',
then you need something like:

var cCollection = [];

function makeClassArray ( nName, cName ) {
if ( ! document.getElementsByTagName ||
! document.body.style ) return;
var el, els = document.getElementsByTagName( nName );
var i = els.length;
var re = new RegExp('\\b' + cName + '\\b' );
while ( i-- ) {
el = els;
if ( el.className && re.test(el.className) ){
cCollection.push( el );
el.style.display = 'none';
}
}
}

function showHide( v ){
var i = cCollection.length;
while ( i-- ) {
cCollection.style.display = v;
}
}

...

<body onload="makeClassArray( 'span', 'showHide' );">

...

<input type="button" value="Show all" onclick="
showHide('');
">
<input type="button" value="Hide all" onclick="
showHide('none');
">

You may want to include support for document.all also. A similar method
can be used to toggle the button values between '+' and '-', or you could
try to associate the button with the span some other way so that the value
is toggled by a function when the span is shown/hidden.

[...]

expand / collapse all with this script	1	Aug 8, 2005
Opera dynamic opacity: solved	1	Jan 8, 2006
CSS Layout Issue in IE6 - Example in Book Fails	1	Dec 14, 2007
Scrolling with mouse wheel	5	Sep 8, 2005
Expand/collapse blocks of divs in a page	2	May 22, 2006
Lately I'm finding a lot of absolute divs	8	Apr 1, 2005
RFC: Building the Perfect Tabbed Pane (an tutorial article)	69	Feb 13, 2008
[SUMMARY] Literate Ruby (#102)	0	Nov 24, 2006

expand/collpase all instances of this script on a page

Randy Starkey

RobG

Randy Starkey

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads