#### Hybrid View

1. Registered User
Join Date
Sep 2003
Location
Utah
Posts
396

## Expand/Collapse Paragraph

I have a table that shows results from a database. One of the fields is a memo field that can be quite long. So, I am using some javascript to display just the first 50 or so characters. What I would like to do now is add a link at the end that the user can click to display the full field and then when the full field is displayed have another link that they can click to collapse it down again. I have seen this done quite a few times, but don't know how to do the collapse/expand part. Any thoughts?

2. 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 blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah 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 blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah 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 blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</span>```

3. Registered User
Join Date
Jan 2006
Posts
2
Very handy script, thank you. I have the following related question. As written, the blah blah blah texts are displayed in full by default. Any suggestion how to reverse the default so that just an introductory line of text is displayed followed by (or preceded by) the button? For example:

[Toggle button] Click TOGGLE to expand/collapse submission instructions...

[Toggle button] Click TOGGLE to expand/collapse driving instructions...

[Toggle button] Click TOGGLE to expand/collapse FAQ...

TIA for any assistance,
Bob

4. Registered User
Join Date
Apr 2003
Location
UK
Posts
2,203
Change the P tags to Div tags, add style="display:none", wrap all but the first line within the div tags

First line First line First line First line First line First line First line First line First line
<div id="para1" style="display:none">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<br>
<br>

5. Registered User
Join Date
Jan 2006
Posts
2
Excellent! Thank you, that's perfect.

Why anyone would know such things always fascinates me but that's stuff for an entirely different thread.

Wishing you and All a very happy New Year!
Bob

6. Registered User
Join Date
Jan 2006
Posts
1

## collapsible text - nice touch, but illegal...

...if you forget to use a different ID for any element in a single page: you can't use the same ID for several elements.
Great one!
Last edited by Mitch074; 01-13-2006 at 08:34 AM.

7. Registered User
Join Date
Aug 2014
Posts
3
How would you make this expand and collapse all? if you had:

First line First line First line First line First line First line First line First line First line
<div id="para1" style="display:none">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<br>
<br>
First line First line First line First line First line First line First line First line First line
<div id="para1" style="display:none">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<br>
<br>
First line First line First line First line First line First line First line First line First line
<div id="para1" style="display:none">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<br>
<br>

8. 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/

9. Super Moderator
Join Date
Jun 2004
Location
Portsmouth UK
Posts
2,709
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>```

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

11. 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 08:13 AM.

12. ## 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

13. Super Moderator
Join Date
Jun 2004
Location
Portsmouth UK
Posts
2,709
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>```

14. Originally Posted by vwphillips
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>```

15. I was debating on what to search, this or Google, i used Google and still ended up here, just what I wanted but without the buttons, works great.

I have a question, can this be done without javascript?

There are currently 1 users browsing this thread. (0 members and 1 guests)

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•

"

"

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.18357 seconds
• Memory Usage 3,517KB
• Queries Executed 13 (?)
Template Usage (35):
• (8)bbcode_code
• (2)bbcode_html
• (2)bbcode_quote
• (1)footer
• (1)forumjump
• (1)forumrules
• (1)gobutton
• (15)memberaction_dropdown
• (1)navbar
• (1)navbar_moderation
• (1)navbar_noticebit
• (1)navbar_tabs
• (2)option
• (1)pagenav
• (1)pagenav_curpage
• (15)postbit
• (15)postbit_onlinestatus
• (15)postbit_wrapper
• (1)spacer_close
• (1)spacer_open
• (1)tagbit_wrapper

Phrase Groups Available (6):
• global
• inlinemod
• postbit
• posting
• reputationlevel
Included Files (27):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/functions_bigthree.php
• ./includes/class_postbit.php
• ./includes/class_bbcode.php
• ./includes/functions_reputation.php
• ./includes/functions_notice.php
• ./packages/vbattach/attach.php
• ./vb/types.php
• ./vb/cache.php
• ./vb/cache/db.php
• ./vb/cache/observer/db.php
• ./vb/cache/observer.php

Hooks Called (73):
• init_startup
• friendlyurl_resolve_class
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• strip_bbcode
• friendlyurl_clean_fragment
• friendlyurl_geturl
• forumjump
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates
• notices_check_start
• notices_noticebit
• process_templates_complete
• friendlyurl_redirect_canonical
• pagenav_page
• pagenav_complete
• bbcode_fetch_tags
• bbcode_create
• postbit_factory
• postbit_display_start
• postbit_imicons
• bbcode_parse_start
• bbcode_parse_complete_precache
• bbcode_parse_complete
• postbit_display_complete
• memberaction_dropdown
• tag_fetchbit_complete
• forumrules
• navbits
• navbits_complete