1. Registered User
Join Date
Mar 2011
Posts
1
Just for those who are having issues with the font being all red...and not working for the second and third links, it's because the <a> tags aren't being closed... so it's making everything a link.

here's a revised code for everyone... hope it works for you, cause it works for me. I came across this while searching for some jquery stuff... but surprised no one caught the basic html error of no </a>. I didn't include the actual javascript stuff, cause that's fine; though I did add a class just cause it's helpful sometimes.

Code:
<style>
.para{
border: 1px solid red;
}
</style>

<body>
<div>A brief note about my first text here.<p id="para1" class="para">
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>
<hr>
<div>A brief note about my 2nd text here<p id="para2" class="para">
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>
<hr>
<div>A brief note about my 3rd text here. <p id="para3" class="para">
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>
<hr>
<div>A brief note about my 4th text here. <p id="para4" class="para">
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>

2. Registered User
Join Date
Mar 2011
Posts
5
Ultimater, Mr J - I know your original posts were from half a decade ago, but just thought I'd post a quick thanks. In combination, they gave me exactly the information I needed to make my CV work. Thanks!

3. Registered User
Join Date
Mar 2011
Posts
1
Hi guys

I would need some help, am totally new in javascript, actually am waiting for my first javascript class to start by the end of the month. So I found this script here and it does almost what I would need. My needs are when I load the page I need to have all the links to collapsed, which is not the case with this script. And second, if it was possible when you click on one link to expand all other would automatically be collapsed. Could some help me out and just give some explanation on what is added so can start understanding this script. Thanks very much for any help.

Here is the script

***********************
<HTML>
<TITLE>Document Title</TITLE>

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

<style type="text/css">
.toggle{
display:none;
}
</style>

<BODY>

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

</BODY>
</HTML>
***********************

4. Registered User
Join Date
Mar 2011
Posts
5
The thing about sections starting collapsed is answered by Mr J on the first page - essentially, it involves adding a "display:none" style to each section.

Another question occurs to me... I'm using a small JPG (expand.jpg) to indicate that a section can be expanded. Is there any easy way to switch it to another image (called, for the sake of argument, collapse.jpg) when the section's expanded and back again when collapsed?

5. Registered User
Join Date
Oct 2007
Posts
161
I'm using this script, but want the expanded text to continue on the same line as the text already on the screen... at the moment the script is putting a line break <p> in so that the continuing text appears to be a new paragraph..

Can anyone help with this please? I'm guessing I need to change something in the
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>
Also - each toggle I'm using, when clicked returns the page to the top - so the reader has to scroll back down to the text they were reading..... something to do with the <a href="#"> I'm guessing... but how to stop this please?????

6. Registered User
Join Date
Mar 2011
Posts
5
You don't actually need the <a> at all; it's the onclick= bit that's important, and you can put that on anything. On my CV, for instance, I have something along the lines of
Code:
<h3 onclick="return showhide('history')">Employment History</h2>
<div id="history">INSERT EMPLOYMENT HISTORY HERE</div>
That way simply clicking the header will show or hide the text. If you want it in line, I suspect it'll be enough to simply use <span> instead of <div>.

7. Registered User
Join Date
Oct 2007
Posts
161
Thanks - removing the <a href> has helped with the page jumping.... I also replaced <div> with <span> but the expanded text is still appearing on a new line (with no line break inbetween, so its a bit better, but still not perfect!!)

Any other ideas??

8. Registered User
Join Date
Mar 2011
Posts
5
Do you have it on a new line in the code? I'm just guessing wildly at this point, but perhaps something like this would work?

Code:
Could that work?

9. Registered User
Join Date
Oct 2007
Posts
161
No that doesn't help.... here's an example of the code which I'm trying to get to continue on the same line

Code:
avionics area is just being  realised, <span onclick="return toggleMe('para1')" value="Toggle" class="texthighlight">more/less&raquo;</span><span id="para1" style="display:none">future air traffic management
and a link to view the page: http://www.gps-world.biz/avionics.php

and its the first more/less>> on the page that I've shown you......

10. Registered User
Join Date
Mar 2011
Posts
5
I see what you mean. Needs someone more knowledgeable than me to answer that - using the hide code on my website CV last month is my first foray into this sort of thing.

Incidentally, my dad works with GPS, GNSS, SESAR and whatnot...

11. Registered User
Join Date
Jul 2006
Posts
128
Originally Posted by awmperry
Another question occurs to me... I'm using a small JPG (expand.jpg) to indicate that a section can be expanded. Is there any easy way to switch it to another image (called, for the sake of argument, collapse.jpg) when the section's expanded and back again when collapsed?
Pretty simple, really. Just a modification to the original function:
Code:
<script type="text/javascript">
function toggleMe(a, b){
var e=document.getElementById(a);
var f=document.getElementById(b);
if(!e || !f)return true;
if(e.style.display=="none"){
e.style.display="block";
f.src="collapse.jpg";
}
else{
e.style.display="none";
f.src="expand.jpg";
}
return true;
}
</script>
Then, when you call the function toggleMe, you ALSO need to add the ID of the img as the second parameter.

12. Registered User
Join Date
Jul 2006
Posts
128
@LouPhi

Currently in ToggleMe, the display format is being changed to "block". This means, by default, that a new "block" of text is created (hence, a new line). To display it in the same line, change
e.style.display="block"
to
e.style.display="inline"

You can read up on all the possible display formats here:
http://www.w3schools.com/css/pr_class_display.asp

13. Registered User
Join Date
Oct 2007
Posts
161
Thanks irf2k, that seems so obvious now you've told me

I love the idea of changing the 'expand' to 'collapse' once the text is expanded, so I'm also trying your solution to awmperry regarding swapping the image... can you please (as I'm not technical in any way shape or form!) explain what you mean by 'add the ID of the img as the second parameter'?

I'm expanding the text using:

Code:
<span onclick="return toggleMe('para1')" value="Toggle" class="texthighlight"><img src="http://www.chronos.co.uk/images/expand.jpg" width="37" height="11" alt="" /></span><span id="para1" style="display:none">
And I'm assuming I need to add something to the <span id="para1"....> part?

Thanks for your help with this...

14. Registered User
Join Date
Jul 2006
Posts
128
Close...
the original <span id="para1"...> stays the same. That ID is there so that we can reference it (hence, you can only use the id "para1" once in a page, otherwise it gets confusing)
so, if we want to talk about the image, we need to give it an id as well. so this:
Code:
<img src="http://www.chronos.co.uk/images/expand.jpg" width="37" height="11" alt="" />
becomes this:
Code:
<img src="http://www.chronos.co.uk/images/expand.jpg" width="37" height="11" alt="" id="img1" />
Now we come to "adding the id of the image as the second parameter".
The function toggleMe only had one parameter (a), and we have added a second one, so it is now (a, b)
When you call the function like you currently do:
Code:
It will not work, because it expects TWO values, para1 and something else, so we put:
Code:
And of course, if you're using this more than once on a page, the next paragraph would be id='para2' and the next img would be id='img2'.

15. Registered User
Join Date
Jun 2011
Posts
6
Hi guys. Thanks for these scripts.

I would like a way to do allow only one "question" expanded. Only the question clicked should display, when another question is clicked it should collapse this one and open the next...

Thanks!