...

View Full Version : collapsing / expanding paragraphs



jonathanscary
07-08-2005, 06:19 PM
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_
07-08-2005, 08:24 PM
This link (http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm) 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
07-08-2005, 09:02 PM
You could also look at Contractible Headers (http://www.dynamicdrive.com/dynamicindex1/navigate2.htm) 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
07-08-2005, 09:55 PM
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>

Ranger56
07-08-2005, 09:58 PM
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
07-08-2005, 10:08 PM
I don't know - that's how the script is provided on dynamic drive - it did cross my mind too though!

_Aerospace_Eng_
07-08-2005, 10:10 PM
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
07-08-2005, 10:10 PM
And now I know why - because it doesn't work in Firefox if you lose the cursor:pointer style (hand isn't a valid css style is it???).

_Aerospace_Eng_
07-08-2005, 10:11 PM
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
07-08-2005, 10:11 PM
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
07-08-2005, 10:12 PM
Perfect Aerospace - I'm indebted to you guys for all the help with this. Many thanks!!!! (AGAIN!)

:thumbsup:

_Aerospace_Eng_
07-08-2005, 10:13 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum