473,799 Members | 3,161 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.getEle mentById ?
document.getEle mentById(id) :
document.all ?
document.all[id] :
null; // no need to fall back on Netscape here
}

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

function toggleContent(i d, visible) {
var elem = getElement(id);
(elem.style||el em).display = visible?"":"non e";
}

function toggleMore(butt on,id) {
var expand = (button.value== "+");
toggleContent(i d, 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 1934
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.getEle mentsByTagName ||
! document.body.s tyle ) return;
var el, els = document.getEle mentsByTagName( nName );
var i = els.length;
var re = new RegExp('\\b' + cName + '\\b' );
while ( i-- ) {
el = els[i];
if ( el.className && re.test(el.clas sName) ){
cCollection.pus h( el );
el.style.displa y = 'none';
}
}
}

function showHide( v ){
var i = cCollection.len gth;
while ( i-- ) {
cCollection[i].style.display = v;
}
}

....

<body onload="makeCla ssArray( '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.ne t.au> wrote in message
news:NY******** *******@news.op tus.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.getEle mentsByTagName ||
! document.body.s tyle ) return;
var el, els = document.getEle mentsByTagName( nName );
var i = els.length;
var re = new RegExp('\\b' + cName + '\\b' );
while ( i-- ) {
el = els[i];
if ( el.className && re.test(el.clas sName) ){
cCollection.pus h( el );
el.style.displa y = 'none';
}
}
}

function showHide( v ){
var i = cCollection.len gth;
while ( i-- ) {
cCollection[i].style.display = v;
}
}

...

<body onload="makeCla ssArray( '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
22594
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 (paraNum.style.display=="none") { paraNum.style.display=""; arrowNum.src="collapse.gif"; }
16
12399
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 instances of the word "blah" to <img src="MyPicture.jpg" >
7
17223
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 I use this is here: http://www.cod.edu/people/faculty/chenpe/PRAIRIE/index.html Thanks!
1
3355
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
4649
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 double click on that TreeNode. Is there anyway to stop the expand/collapse bahaviour on the double click of a tree Node?? -SARADHI
2
4664
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 entire page. How do I restrict it to each block and also how do I cllapse those in each block and change the text to Collapse All. I am stumped here. Any help really really appreciated. Here is my code. Thanks,
11
2885
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 contracted, expand, so far it doesn't work for the about and services link(but works for the expand all and contract all links), any help would be greatly appreciated: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"...
0
9687
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9541
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10251
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10027
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9072
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7565
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6805
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
1
4141
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2938
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.