1. Registered User
Join Date
Jun 2006
Posts
2
I am trying to use 1 button to expand and collapse multiple <div> tags.
Currently I'm able to expand and collapse just 1.
If I have multiple <div> tags with same ID, it does not work.
Any suggestions?

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>

<div id="text1" style="display:none">
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
</div>
<p>Some more text and tags in between the first blah and second blah</p>
<div id="text1" style="display:none">
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
</div>

2. Registered User
Join Date
Jun 2006
Posts
2

## Figured out just one way, anyone know of a shorter way?

<script type="text/javascript">
function toggleMe(a,b){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
var f=document.getElementById(b);
if(!f)return true;
if(f.style.display=="none"){
f.style.display="block"
}
else{
f.style.display="none"
}
}
</script>

<div id="first1" style="display:none">
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah
</div>
<p>Some more text and tags in between the first blah and second blah</p>
<div id="second1" style="display:none">
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
second blah second blah second blah second blah second blah second blah second blah
</div>

3. Registered User
Join Date
Apr 2003
Location
UK
Posts
2,203
You could try something like this maybe

PHP Code:
``` <script type="text/javascript"> function toggleMe(){ el=document.getElementsByTagName("div") for(var i=0;i<el.length;i++){ if(el[i].className=="toggle"){ if(el[i].style.display=="none"||el[i].style.display==""){ el[i].style.display="block" } else{ el[i].style.display="none" } } } } </script> <style type="text/css"> .toggle{ display:none; } </style> <input type="button" onclick="toggleMe()" value="Details"><br> <div id="first1" class="toggle"> first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah  first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah  first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah  first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah  first blah first blah first blah first blah first blah first blah first blah first blah first blah first blah  </div> <p>Some more text and tags in between the first blah and second blah</p> <div id="second1" class="toggle"> second blah second blah second blah second blah second blah second blah second blah  second blah second blah second blah second blah second blah second blah second blah  second blah second blah second blah second blah second blah second blah second blah  second blah second blah second blah second blah second blah second blah second blah  second blah second blah second blah second blah second blah second blah second blah  </div>  ```
Last edited by Mr J; 06-13-2006 at 06:28 PM.

4. Registered User
Join Date
Jun 2006
Posts
2
How may I make the expanded text expand some more?
I'm trying to make something like this.

Number 1
->Part (a)
--->Question (i)
--->Question (ii)
->Part (b)
--->Question (i)
--->Question (ii)

(and so on)

5. Registered User
Join Date
Jun 2006
Posts
2
oh. i just found out. i just had to change the para1 to para2 and so on.
xD

6. Registered User
Join Date
Oct 2008
Location
Jensen Beach, FL
Posts
1
Hi I am very new to forums, I found your info regarding: Expand/Collapse Paragraph, etc.
I have a website with a orderform and I would like to be able to Expand/Collapse my orderform page, right now I have 5 order areas on the page for ordering up to 5 products. I would ike to have say just the top one appear between the yellow bars and have a button that says: "Add Another Item" then another order area would appear, ie, Item #2 (optional) Item #3 (optional) etc.. is that possible to do with my form...? Here is a link to my order page: http://www.logoclick.com/order/

7. Super Moderator
Join Date
Jun 2004
Location
Portsmouth UK
Posts
2,707
Code:
```<!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">

<title></title>
<style type="text/css">
/*<![CDATA[*/
.hide{
display:none;
}

/*]]>*/
</style><script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Init(id){
var table=document.getElementById(id);
var tbodies=table.getElementsByTagName('TBODY');
for (var zxc0=0;zxc0<tbodies.length;zxc0++){
var rows=tbodies[zxc0].getElementsByTagName('TR');
for (var zxc0a=0;zxc0a<rows.length;zxc0a++){
rows[zxc0a].style.display='block';
}

if (zxc0>0){
tbodies[zxc0].style.display='none';
}
}
}

function More(obj,cls){
var table=obj;
var tbody;
while (table.parentNode){
if (table.nodeName.toUpperCase()=='TBODY') tbody=table;
if (table.nodeName.toUpperCase()=='TABLE') break;
table=table.parentNode;
}
if (tbody.nodeName.toUpperCase()=='TBODY'&&table.nodeName.toUpperCase()=='TABLE'){
var tbodies=table.getElementsByTagName('TBODY');
for (var zxc0=0;zxc0<tbodies.length;zxc0++){
var rows=tbodies[zxc0].getElementsByTagName('TR');
for (var zxc0a=0;zxc0a<rows.length;zxc0a++){
if (rows[zxc0a].className&&rows[zxc0a].className==cls){
rows[zxc0a].style.display='none';
break;
}
}
if (tbodies[zxc0]==tbody&&tbodies[zxc0+1]){
tbodies[zxc0+1].style.display='block';
return;
}
}
}
}
/*]]>*/

<form name="" >
<table id="tst" border="1">
<tbody>
<tr>
<td>
Item 1
</td>
</tr>
<tr>
<td>
<input name="" />
</td>
</tr>
<tr class="hide">
<td  >
<input type="button" name="" value="More" onclick="More(this,'hide');"/>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
Item 2
</td>
</tr>
<tr>
<td>
<input name="" />
</td>
</tr>
<tr class="hide">
<td >
<input type="button" name="" value="More" onclick="More(this,'hide');"/>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
Item 2
</td>
</tr>
<tr>
<td>
<input name="" />
</td>
</tr>
<tr class="hide">
<td >
<input type="button" name="" value="More" onclick="More(this,'hide');"/>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
Item 3
</td>
</tr>
<tr>
<td>
<input name="" />
</td>
</tr>
<tr class="hide">
<td >
<input type="button" name="" value="More" onclick="More(this,'hide');"/>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
Item 4
</td>
</tr>
<tr>
<td>
<input name="" />
</td>
</tr>
<tr class="hide">
<td >
<input type="button" name="" value="More" onclick="More(this,'hide');"/>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
Item 5
</td>
</tr>
<tr>
<td>
<input name="" />
</td>
</tr>
<tr class="hide">
<td >
<input type="button" name="" value="More" onclick="More(this,'hide');"/>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
Item 6
</td>
</tr>
<tr>
<td>
<input name="" />
</td>
</tr>
</tbody>
</table>
</form>
</body>

</html>```

8. Registered User
Join Date
Nov 2008
Posts
3
Hi, I didn't want to create a new thread since I have a problem relating to an expand/collapse feature. Following is my problem:

I have 2 rows in a table...

HTML Code:
```<table>
<tr id="40807386" class="hidden ">testing this</tr>
<tr id="34893485" class="hidden ">testing this again</tr>
</table>```
So I can hide this row by going
Code:
`\$('.hidden').toggle();`
but this hides both the rows when I only want to hide the first row, not both. Is there a way to get the id of the element so that I can go something like
Code:
`(\$(this).id).toggle()`
This ^ gives me an error but I need to be able to do something similar. Any help on this would be greatly appreciated

Thanks

9. Registered User
Join Date
Feb 2007
Posts
63

## brace for the ultimate in noob questions

Hi, i'm working on an XML transform and i'd like to do exactly the same thing but without buttons. I can get it to work with a href but I want to be able to change the text that the href is displaying for example :

Code:
```    <script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if (e.style.display == "none") {
e.style.display = "block"

}
else {
e.style.display = "none"

}
return true;
}
</script>```

HTML Code:
```<a href ="#" class=menutoggle" onclick="return toggleMe('para1')">Heading [+]</a>
<p id="para1">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</p>```
So it will look like:

and

blah blah blah blah blah blah blah blah

I tried using e.innerHTML to change the Heading value but it doesn't like that, it just prints out when the menu is expanded and not the actual paragraph.

Thanking j00
Last edited by AlaNio; 03-25-2009 at 09:13 AM.

10. Super Moderator
Join Date
Jun 2004
Location
Portsmouth UK
Posts
2,707
Code:
```    <script type="text/javascript">
function toggleMe(a){
var evt=window.event||arguments.callee.caller.arguments[0];
var obj=window.event?evt.srcElement:evt.target;
if(obj.nodeType==3) obj=obj.parentNode;
var e=document.getElementById(a);
if(!e)return true;
if (e.style.display == "none") {
e.style.display = "block"
obj.innerHTML=obj.innerHTML.replace('-','+');
}
else {
e.style.display = "none"
obj.innerHTML=obj.innerHTML.replace('+','-');
}
return true;
}
</script>```

11. Registered User
Join Date
Apr 2009
Posts
1
it's very easy with a simple javascript. here is an example:
http://n1scripts.com/javascripts/jav...=scripts&id=12

12. Registered User
Join Date
Aug 2009
Location
New York
Posts
1
Hi, I'm new to this forum and find it very helpful. I've also found the original expand/collapse JS (that started this thread) very helpful as well as I've just starting to teach myself HTML and web page development.

The web pages are organized along the lines of chapters in a book, following a table of contents organization where the reader can go deeper and deeper into an area as they wish. And so I've used the expand/collapse feature extensively throughout the web pages I've made so far. Each page covers a broad topic area, but within each specific topic areas are initially in a "collapsed" form until the reader clicks further on a topic to see it in an expanded form. And so "expansion" of a topic area only occurs via the onclick approach for the blocks of info associated with the relevant ID label used in the ToggleMe function.

At the same time however, I'd like to create an index page (like in the back of a reference book) where a user could select a specific topical item from an indexed list, and the link would take the user to the relevant web page, and section of the page with that particular information would already be in the "expanded" mode. In this scenario, the reader would not have to click any further to get to see the fully expanded piece of information.

I hope this is understandable and wonder if anyone has any technical advice on how to do this.

Thanks -- Mark.

13. Registered User
Join Date
Apr 2010
Posts
1
Quick question: If I have three of these hidden <div>s on one page, every time the user shifts from one "tab" to another, how do I make the others disappear until the user clicks on their button again?

14. ## adding a expand all / collapse all button to this code

Originally Posted by Ultimater
A snippet:
Code:
```<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>

<p id="para1">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</p>
<br>
<div id="para2">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<br>
<span id="para3">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</span>```
Thanks for this code - it works great!
I'm having a bit of trouble adding a expand all/collapse all button at the top of my page. I've looked on other websites, but obviously they don't follow the same code!
Is there an easy way of doing it cos I can only get it to show all toggle buttons or hide all toggle buttons and not the detail in each one.

Hope this makes sense!

TIA x

15. Super Moderator
Join Date
Jun 2004
Location
Portsmouth UK
Posts
2,707
Code:
```<!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">

<title></title>
<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}

function toggleAll(p,a){
for (var z0=1;document.getElementById(p+z0);z0++){
document.getElementById('para'+z0).style.display=a?'block':'none';
}
}

</script>

<body>
<p id="para1">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</p>
<br>
<div id="para2">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<br>
<span id="para3">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</span>
</body>

</html>```