1. 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>```

2. Registered User
Join Date
Sep 2010
Posts
1
Hello, I am new to this section and managed to work the actual thing first time thanks to the good thread it is,

But on my Menu people will set what they want collapsed etc and what they ont, but as soon as they click onto a new page all the menu just uncollapses again? meaning its pointless to use seeing as you wont be on one page for that long.

How can i stop this happening?

3. Registered User
Join Date
Sep 2010
Posts
1

## Aligning the Text/Buttons

Hi all

Working with students and developing a site using some of the very useful above 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>
We are using this code as we can easily style the headers. Can you suggest ways we can align the headers, to the right for instance.

Thank you.

4. Registered User
Join Date
Dec 2010
Posts
4

## Keeping the div closed when changing pages

Hey All,

I am using this idea to close a footer on a php site. My issue is that once I click a link to a different page, the footer displays again. How can I keep the display set to none? Any ideas are very appreciated!

Thanks!

5. Registered User
Join Date
Feb 2011
Posts
6

## expand/collapse script

Hi,

I have tried the script given here for expanding / collapsing text. It works fine, however, having a button is not really nice. I would rather to have a text instead of the button, showing the first line of the text and once you click on the text title, it expands to show the whole text. like this:

This is the title which is clickable

This is the first line of the text which shows by default

This is the bla bla bla blabla section which shows after clicking on the clickable line.

Can anyone suggest how to modify the script given here to do the task I mentioned.

6. Registered User
Join Date
Dec 2010
Posts
4

Hello xironet,

Try this!

<code>
<body>
<p>First sentence that displays by default here.</p>
<p id="para1">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</p>
</body>
</code>

Basically you are just moving the onclick event to a link that refreshes the page. Hope this helps!

7. Registered User
Join Date
Feb 2011
Posts
6
Hi,
Many thanks for your help. It works with slight problem, I paste my code here:

<!DOCTYPE html>
<html>

<meta content="text/html; charset=windows-1252" http-equiv="Content-Type">
<title>Untitled 1</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;
}
</script>

<body><!-->
Treatment in the UK is one of the best in the world.
<p id="para1">
Treatment in the UK is one of the best in the world.blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah 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>
</span>
</body>

</html>

And this is what I get in browser:

show all
hide all
Treatment in the UK
Treatment in the UK is one of the best in the world.
Treatment in the UK is one of the best in the world.blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

Now, line, Treatment in the UK & Treatment in the UK is one... are joined together. The first Treatment in the UK is what I wrote in the title and the next line is my first line which should show by default. Once I click on the "title" the first line shoul expand and show the blahblah section. It doesn't quite work that way.
You have the full code perhaps you can see it for yourself.

Regards,

Hamid

8. Registered User
Join Date
Dec 2010
Posts
4
OK, try this. I changed the <p id="para1"> to a div instead and included the first sentence inside just a standard <p> tag.

<code>
<body><!-->
<p>Treatment in the UK is one of the best in the world. <div 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</div>
</p>
<br>
</span>
</body>
</code>

9. Registered User
Join Date
Feb 2011
Posts
6
Hi Dear,

Many thanks for your help, it is great. It works fine with a slight problem. I have actually uploaded the site in a dummy domain I have for you to see. Please go to :

Problems that I see are:

1-The text colour has changed to red.
2- The lower paragraphs depend on the top one. In other words, when I click on paragraph 3, it hides or open parageraph 4. Similarly, clicking parageraph 2, hids/show parageraphs 3 and 4, and so on.

I copy the bit of code I have for you here:

<span lang="en-gb">
<p>Treatment in the UK is one of the best in the world. <div id="para1">
<p>blah blah blah blah blah blah blah blah blah blah blah blah 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>

<p>Treatment in Europe is one of the best in the world. <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</p>

<p>Treatment in Europe is one of the best in the world. <div 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</p>

<p>Treatment in Europe is one of the best in the world. <div id="para4">
blah blah blah blah blah blah blah blah blah blah blah blah 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>
</div>
</div>
</div>

By the way on the top of the page I have some Javascript code which I mention here, not sure if they are relevent:

<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<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>
<script src="maxheight.js" type="text/javascript"></script>
<script type="text/javascript">
<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>
</script>
<style type="text/css">
.auto-style1 {
font-size: small;
}
</style>

I hope you can help on this.

Regards,

Hamid
Last edited by xironet; 02-22-2011 at 03:29 PM.

10. Registered User
Join Date
Dec 2010
Posts
4
Hi Hamid,

This should fix the issue with the paragraphs hiding. The </div>s need to be after each paragraph as below to tell the page where each paragraph ends:

<span lang="en-gb">
<p>Treatment in the UK is one of the best in the world. <div id="para1">
<p>blah blah blah blah blah blah blah blah blah blah blah blah 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></div>

<p>Treatment in Europe is one of the best in the world. <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</p></div>

<p>Treatment in Europe is one of the best in the world. <div 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</p></div>

<p>Treatment in Europe is one of the best in the world. <div id="para4">
blah blah blah blah blah blah blah blah blah blah blah blah 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></div>

As for the text turning red, that must have something to do with the stylesheets that are included (style.css and layout.css). Check in there to see if there is code that sets the font color to red. Best of luck!
Last edited by tjfoz; 02-23-2011 at 01:26 PM. Reason: highlighted changes in code

11. Registered User
Join Date
Feb 2011
Posts
6
Hi,

Thank you very much, you are a star. There is a small hicup though. Everything works perfect apart from the fact that when the page is loaded or shows, all the text is in expansion mode. Ideally it should be in closed format until the user clicks on link to expand his requiered link.
Look forward for your help. You can see it live on the site.

Regards,

Hamid

12. Registered User
Join Date
Mar 2011
Posts
2

## I see this thread is really old...

....but it brought me here from a google search.
Rather than start a redundant thread I assume it is best to bring this one back to the top.

I used the methods suggeste here to set a collapsing paragraph, I thank you it worked great, however when I try to place more than one the second one will not work.
I changed the para value to 2 on the second one, it does engage the primary, it is seperate at the bottom of the page.
Can anybody advise, does it have to flow with the primary?
If not how should it be wrote?

I use VWB 2010 Express .net developer with .aspx extensions

13. Registered User
Join Date
Feb 2011
Posts
6
Well! I am not much of expert on this and I learnt it here from tjfoz who is brillient and I must say I still have a little issue with it. Mine works and all you have to do is to copy and paste the code above, dated 02.23.2011 from tjfoz. I don't think having aspx or html extension will make any difference, because you are using javascript for this which will work with .NET happily.
Anyhow, good luck.

Hamid

14. Registered User
Join Date
Mar 2011
Posts
2
I realized that this thread has been updated recently after I set my first post, I tried to modify but I did not see that option.

Here is what I trying:
<input para1..... blahblah ect /span> works great

Text with other information about other things.

<input para2....blahblah ect /span> the second setting does not work

Does this explain my problem better?

15. Registered User
Join Date
Feb 2011
Posts
6
Ok, do what I did, creat a simple blank html page and then copy / past the code below. It works fine. Then transfer the code into your original file bit by bit and find where it goes wrong. Creating a simple file and testing the actual code in it will make you confident that your original code is OK and works, then you can start troubleshooting as soon as you move it over to your aspx file. Let me know how it goes.

<!DOCTYPE html>
<html>

<meta content="text/html; charset=windows-1252" http-equiv="Content-Type">
<title>Untitled 1</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;
}
</script>

<body><!-->
<span lang="en-gb">
<p>A brief note about my first text here. <div id="para1">
<p>Full text about my first text here ...blah blah blah blah blah blah blah blah blah blah blah blah 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></div>

<p>A brief note about my 2nd text here<div id="para2">
Full text about my 2nd text here ...blah blah blah blah blah blah blah blah blah blah blah blah 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></div>

<p>A brief note about my 3rd text here. <div id="para3">
Full text about my 3rd text here ...blah blah blah blah blah blah blah blah blah blah blah blah 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></div>

<p>A brief note about my 4th text here. <div id="para4">
Full text about my 4th text here ...blah blah blah blah blah blah blah blah blah blah blah blah 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></div>

</div>
</div></span>
</body>

</html>
Last edited by xironet; 03-03-2011 at 06:50 AM. Reason: misspell