expand/collpase all instances of this script on a page

R

Randy Starkey

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

RobG

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.


[...]
 
R

Randy Starkey

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.

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.


[...]
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,717
Messages
2,569,382
Members
44,705
Latest member
BerniePele

Latest Threads

Top