collapsing / expanding paragraphs

[jonathanscary]

I've seen the technique I think on one of the Microsoft sites for FAQs.

Essentially each question in the FAQ is a link which when clicked pushes the next question down to make room for the answer.

I think there was a link to expand/collapse all too.

Does anybody know if anyone's documented this or is there some code I could butcher?

Thanks

jonathan

[_Aerospace_Eng_]

This link seems like it might help you. Its basically just setting the display properties of the paragraphs to none and then to block. If you want them to where they stay open and not make the previous one close well you might just have to tweak the code in the link provided a bit.

[Grant Palin]

You could also look at Contractible Headers on the same website...same general idea, but it has an option of keeping other items open when you click a new item, and for the browser to remember the last open items (using a cookie) in case you leave the page and come back.

[jonathanscary]

Thanks to both of you. I've implemented the script on this page:

http://www.numberstore.net/faq.asp

and added the following code to my stylesheet to match the h3 tags. Is there a simple way to get these to change colour on mouseover, like the "contact page" link above them.

thanks

jonathan

h3 {
font-weight: bold;
font-size: 10px;
color: #064AAB;
margin: 10px 0;
}

<h3 onClick="expandcontent('sc1')" style="cursor:hand; cursorointer">What is JavaScript?</h3>
<div id="sc1" class="switchcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

[Ranger56]

Originally Posted by jonathanscary

Thanks to both of you. I've implemented the script on this page:

http://www.numberstore.net/faq.asp

and added the following code to my stylesheet to match the h3 tags. Is there a simple way to get these to change colour on mouseover, like the "contact page" link above them.

thanks

jonathan

h3 {
font-weight: bold;
font-size: 10px;
color: #064AAB;
margin: 10px 0;
}

<h3 onClick="expandcontent('sc1')" style="cursor:hand; cursor:pointer">What is JavaScript?</h3>
<div id="sc1" class="switchcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

Why do you have two cursor styles?

[jonathanscary]

I don't know - that's how the script is provided on dynamic drive - it did cross my mind too though!

[_Aerospace_Eng_]

Jon you would need to use a link to make them change color on hover

<h3><a href="#" onclick="expandcontent('sc1');return false">What is JavaScript?</a></h3>
<div id="sc1" class="switchcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

Then change this

h3 {
font-weight: bold;
font-size: 10px;
color: #064AAB;
margin: 10px 0;
}

to this

h3 {
font-weight: bold;
font-size: 10px;
margin: 10px 0;
}
h3 a, h3 a:link, h3 a:visited, h3 a:active {
color: #064AAB;
text-decoration:none;
}
h3 a:hover {
color: #FF0000; /*change the hex value to one you desire*/
}

[jonathanscary]

And now I know why - because it doesn't work in Firefox if you lose the cursorointer style (hand isn't a valid css style is it???).

[_Aerospace_Eng_]

No hand is not valid but using the code i just gave you, you won't need it because they will be treated as links.

[Grant Palin]

You can actually put an A element inside the h4 and target your style to that instead. In fact, you don't actually need the h4 at all - the script doesn't depend on the type of element being used, just the class and javascript action. So you could leave out the h4 altogether, and put the classheader class in the A element itself, as well as the onlick attribute.

Ranger56: there are two cursor styles because the netscape line of browsers uses a different cursor for the link rollover, so there are two styles to ensure that both netscape and IE get an appropriate cursor. Actually, the default script has no links at all, just the h4's. Javascript and styles are used on those h4's to simulate links, which is a bit redundant.

[jonathanscary]

Perfect Aerospace - I'm indebted to you guys for all the help with this. Many thanks!!!! (AGAIN!)

[_Aerospace_Eng_]

Grant is correct you don't really need the headers but I see what you are trying to do. You are trying to draw attention to them for the search engines.