473,320 Members | 1,823 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

expand/collpase all instances of this script on a page

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

Aug 18 '05 #1
2 1902
Randy Starkey wrote:
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[i];
if ( el.className && re.test(el.className) ){
cCollection.push( el );
el.style.display = 'none';
}
}
}

function showHide( v ){
var i = cCollection.length;
while ( i-- ) {
cCollection[i].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.
[...]

--
Rob
Aug 19 '05 #2
Rob - Thanks! Makes sense.

--Randy

"RobG" <rg***@iinet.net.au> wrote in message
news:NY***************@news.optus.net.au...
Randy Starkey wrote:
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[i];
if ( el.className && re.test(el.className) ){
cCollection.push( el );
el.style.display = 'none';
}
}
}

function showHide( v ){
var i = cCollection.length;
while ( i-- ) {
cCollection[i].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.
[...]

--
Rob

Aug 19 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: James Hurrell | last post by:
Hi, I'm using the following javascript function to expand and collapse portions of text in a web page (targeted at IE5.5 and above): function doExpand(paraNum,arrowNum) { if...
16
by: juglesh | last post by:
Hello, I need to look through the text on a page and replace certain words with an image or other word something like: read document find all instances of the word "blah" change all...
7
by: peter | last post by:
I use the click-to-expand menu at http://javascript.internet.com/navigation/click-to-expand-menu.html This works fine, but is there a way to expand or collapse all the menus? An example of how...
1
by: Randy Starkey | last post by:
Hi, Is there a way to expand and collapse all if I have multiple implementations of this script on a single page? The script works well individually. Thanks! --Randy Starkey ---
1
by: Saradhi | last post by:
I am facing a problem with the TreeView in C#. Whenever I double click on a TreeNode, I am opening another form. This works fine. But the Treenode is getting expanded and collpased whenever I...
2
by: sam | last post by:
Hi all, I have a series of divs in 2 blocks say BLOCK1 and BLOCK2 and I want to use one click to expand/collapse all those in each block. But the code I came up with exapands all the divs in the...
11
by: Nospam | last post by:
I don't know what it is I am doing wrong, I am trying to get the menus to either expand or contract based on their previous states, i.e if already expanded if clicked again contract, and if...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.