Is there a fairly simple way to create a Q&A section where the questions are all listed and numbered and when you click on the question the answer appears below the question and pushes the rest of the questions below the answer? You see this a lot and seems to be a very organized and neat way to handle a Q & A section.

Thanks
www.smacktalkdesigns.com

This is very hard to do with SS as the generated HTML code uses CSS positioning. Unfortunately, turning off CSS positioning does not help, since you must then resort to adding the required HTML/CSS code to do what you want. In this case, find an appropriate script and get a good HTML editor.

You can achieve a somewhat similar effect using mouse overs: sample here. Not as pretty as a collapsable menu, but entirely made in SS.

Here is a script that you might find useful.

Roma,

I used that script, and with some mods for SS, the result is here. Part of the problem with using this type of script with SS can be seen as the expanded text interferes with the image. In SS, there is no way to adjust the position of the other page objects.

But if the page is composed entirely of Q&As or FAQs, then there would be no other SS objects that would get in the way. The page could also be used inside an i-frame to allow other objects on the page.

The project file can be downloaded so the mods I made can be viewed. The script is inside a custom header. I used a text object for the FAQs, but embedded code inside the text. This simplifies the amount of external code required by the original. It also allows you to use the text formatting options of a text object rather than adding CSS style code.

Wow - let me take a moment to bow to one of the SS masters. This is exactly what I was looking for as I am not a coder and being able to simple edit and existing project will allow me to accomplish my goals.

At times it is easy to find scripts but again for us noobs they are useless. Working, real live scripts, that the rest of the world can use is greatly appreciated!!!

Many Thanks
www.smacktalkmall.com

Yeah, Roma is good. Just tell her approximately what a script should do and she will find it.

Make sure you read the Help->Tutorials->Advanced Topics "Text Editor Options and Filters" section. If you do not turn off the "Convert tag brackets" setting, the embedded code will show up as text and the script will fail.

It's all about the team-work Larry

Larry -

In using the code you provided I attempted to increase the number of questions by simply copy/paste the text from one question. As an example I added a question and changed the link to onClick="openClose('a4'); then changed the beginning of the answer to <div id='a4' style='display:none;'>

The results were that when I click on the question the answer does not appear. Any suggestions for adding more questions to the code?

Thanks
www.smacktalkmall.com

You must also add "a4" in your header on this line:
var divNum = new Array("a1","a2","a3","a4");

Thx! After a second of thinking about it I founder the header, made the changes and it is working perfectly. Thanks again from a non-coder for making this simple.

www.smacktalkmall.com

Follow up question - I can not figure out how to change the font/size of the question portion of the code. No issues with the answers just the question. Any way to simply change the font/size for the questions?

Thanks

smacktalkmall.com

You just highligt the question and make the changes to the text as usual.

That is the problem I can not change question font/size. When I save out of the text editor it reverts back. Answer portion works fine.

Since the question is a text link, make sure you have highlighted the entire link. You may need to "expand links" to make sure you highlight all the link (including the link tags). If you fail to highlight the entire link, changing the font and size will not work.

Thx - but how do you "expand links" to insure I am highlighting it all. This must be my problem.

Thanks for your help!

When in Text Editor Options > Expand Hyperlinks.

Thank you for pointing out the obvious!

I have used this code in my own website and its perfect for what i am wanting it for, in total i have 37 questions with their corresponding answers, all show as they should when clicked, the only problem i have is when you scroll down the page to find a question, once you click it to show the answer the page automatically scrolls to the top of the page, therefore the user has to scroll back down to see the answer, is there anyway to make the page stay in place when a question is clicked so no scrolling is required??

Hope you can help
http://www.bouncylandbarnstaple.co.uk/FAQ.html here is the page

This message has been edited. Last edited by: pitkin03,

The link URL for each item is a # (an empty bookmark) which returns you to the top of the page when clicked.

I suggest turn it into a real bookmark which takes you to the start of the question.

Original fragment of Larry's code:

<a href="#" onClick="openClose('a3');"><span style="color:#000000;">
3. This is item 3:</span></a>

Modified fragment with a real bookmark:

><a name="Item3"></a><a href="#Item3" onClick="openClose('a3');"><span style="color:#000000;">
3. This is item 3:</span></a>

Don't be tempted to use "a3" for the bookmark anchor as I was -- it didn't work in IE8. Instead use a different name -- I used "Item3" here.

thanks that did the trick perfectly