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

8. I've been getting too many PMs concerning http://javascript.internet.com/misce...paragraph.html
which has a link to this thread. Perhaps others will encounter this thread after they decide to check out the Contributor URL.

Once and for all, you can have as many buttons as you wish on the page. You can put the buttons anywhere on the page you wish -- it doesn't have to be right-next-to the paragraph it will toggle. The button "knows" which paragraph to target via the ONCLICK event handler. ONCLICK="return toggleMe('para1')" would target the paragraph with the ID="para1"
Code:
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title></title>
<style type="text/css">
input.button {
color: #fff; background: #0034D0;
font-size: .8em;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: solid 1px #ffcf31;
}
</style>
<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>
<body>

<div>
</div>
<div id="para1" style="display:none">
Yes, all the scripts on this site are free for personal or business use. The only requirement for using them is that you leave the credit information inside the script.
</div>
<div>
</div>

<div><br></div>

<div>
<input type="button" class="button" onclick="return toggleMe('para2')" value="What is JavaScript? Is it the same as Java?">
</div>
<div id="para2" style="display:none">
JavaScript is NOT Java. JavaScript is a basic scripting language that allows Web authors to create dynamic pages that react to user interaction.
</div>
<div>
<input type="button" class="button" onclick="return toggleMe('para2')" value="What is JavaScript? Is it the same as Java?">
</div>

</body>
</html>```

9. Registered User
Join Date
Apr 2006
Posts
1
I am trying to do the same thing as above only with a slide in/out tab. When the page loads the tab with information is showing, when the user clicks on the lower corner to close the tab it slides up so that only a small corner is showing. When they click on the tab again, the entire tab is visible again. This is what I currently have:

<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.margin=='-120px 0px 0px 0px'){
e.style.margin='0px 0px 0px 0px'}
else{
e.style.margin='-120px 0px 0px 0px'
}
return true;
}
</script>
<body style="margin-top: 0px; margin-left: 0px;">
<table border="0" cellpadding="0" cellspacing="0" id="popup" style="margin: 0px 0px 0px 0px;">
<tr>
<td id="Td1" style="background: url('popup.gif') no-repeat top left; height: 120px; width: 264px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">Volume discounts available when ordering Karyotype and SingatureChip&reg; microarra combination.<br /><a href="">Please click here for more details</a></td>
</tr>
<tr>
<tr>
<td></td>
<td align="right" onclick="return toggleMe('popup');"><img alt="" border="0" height="20" hspace="0" src="tab.gif" width="50" vspace="0" /></td>
</tr>
</table></td>
</tr>
</table>

10. Something like this?
Code:
```<script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.margin=='-120px 0px 0px 0px'){
e.style.margin='0px 0px 0px 0px'}
else{
e.style.margin='-120px 0px 0px 0px'
}
return true;
}
</script>
<body style="margin-top: 0px; margin-left: 0px;">
<div style="width:500px;height:200px; background-color:blue;color:red;">line 1<br />line 2<br />line 3<br />line 4<br /></div>
<div id="Td1" style="background: url('popup.gif') no-repeat top left; height: 120px; width: 264px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">
Volume discounts available when ordering Karyotype and SingatureChip&reg; microarra combination.<br /><a href="">Please click here for more details</a>
</div>

11. dvs
Registered User
Join Date
May 2006
Posts
5
Hi. New to this forum. Have an issue and rather than start a new thread thought I would post it here as it seems most relevant.

I have a FAQ page which has about 50 questions. I thought I would use a expand/collapse script as it's the most easiest to view. Each question is a link to the answer (rather than a button or graphic). All works well except uthe user is returned to the top of the page when the question expands. You don't notice it on the first set questions but it is annoying for the questions that are further down the page.

I am using the following code for the questions:
<div class="navBar"><a href="#" onclick="reveal('S01')">
What is the question?
</a></div>
<div class="S01" id="S01" style="display: none;">
</div>

When I use the above code with a button or graphic, it works fine. Just when using <a href='#'> it seems to only want to return to the top of the page (although it does open question). Any ideas?

12. Registered User
Join Date
Apr 2003
Location
UK
Posts
2,203

<a href="#" onclick="reveal('S01') ; return false">What is the question?</a>

or you could go with a div and style it with css

<style type="text/css">
.question{
text-decoration:underline;
color:#00F;
}
</style>

<div class="question" onclick="reveal('S01')">
What is the question?
</div>

13. dvs
Registered User
Join Date
May 2006
Posts
5
Thanks for reply. That kinda worked in that the answer appears on screen and it doesn't make you return to the top. However, the only problem is that the answer appears befor the question once revealed. Any suggestions?

eg.
Q. What is the question?

Q. What is 5 + 5?

14. Registered User
Join Date
Apr 2003
Location
UK
Posts
2,203
Post the code you are using

15. dvs
Registered User
Join Date
May 2006
Posts
5
Originally Posted by Mr J
Post the code you are using
<script type="text/javascript">
function reveal(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>

In the body:

<a href="#" onclick="reveal('S81'); return false">
What is 5 + 5?
</a>
<div id="S81"; style="display:none">
<p>
10
</p>
</div>
Last edited by dvs; 05-11-2006 at 08:59 AM.