Expand Collapse FAQ in MS SharePoint

I am trying to expand and collapse text in Microsoft SharePoint 2007 for frequently asked questions.
Could you please show me how to do that the easiest way?
It seems like it can be done using Jquery or Javascript in Sharepoint

I will provide a question and when the user clicks on the question link, the answer will show right below the question. Second click will hide the answer. (Show/Hide or toggle)

The link below is a great example of what I am trying to accomplish in Sharepoint 2007.

http://www.colostate-pueblo.edu/HR/FAQs/Pages/Benefits.aspx

Thanks for your help
TohoITAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

strickddCommented:
<a href="#" onclick="if(document.getElementById('myDiv').style.display=''){document.getElementById('myDiv').style.display='none'} else { document.getElementById('myDiv').style.display=''} return false; ">What is the FAQ?</a>
<div id="myDiv" style="display:none;">
   FAQ means Frequently Asked Question.
</div>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
TohoITAuthor Commented:
Thanks for your help, Strickdd.
How can I implement this on SharePoint 2007?

Should I put this code  in Source Code of Content Editor Web Part?
TohoITAuthor Commented:
Thank you, Strickdd
I tried  this in Content Editot  in MS Shareoint and it works great !!!

Only one piece is missing from the users point of view.

If we have 10 questions, the user would like the collapse the prior question when another question is clicked.

I really appreciate your help
Protecting & Securing Your Critical Data

Considering 93 percent of companies file for bankruptcy within 12 months of a disaster that blocked access to their data for 10 days or more, planning for the worst is just smart business. Learn how Acronis Backup integrates security at every stage

strickddCommented:
<a href="#" onclick="if(document.getElementById('myDiv').style.display=''){document.getElementById('myDiv').style.display='none'} else { document.getElementById('myDiv').style.display=''; document.getElementById('myDiv2').style.display='none';document.getElementById('myDiv3').style.display='none'; document.getElementById('myDiv4').style.display='none'; document.getElementById('myDiv5').style.display='none';} return false; ">What is the FAQ?</a>


<a href="#" onclick="if(document.getElementById('myDiv').style.display=''){document.getElementById('myDiv2').style.display='none'} else { document.getElementById('myDiv1').style.display='none'; document.getElementById('myDiv2').style.display='';document.getElementById('myDiv3').style.display='none'; document.getElementById('myDiv4').style.display='none'; document.getElementById('myDiv5').style.display='none';} return false; ">FAQ number 2?</a>

etc...
TohoITAuthor Commented:
The second code did not work.

I am not familiar with javascript so I just coped and pasted the code and modified like this.


<a href="#" onclick="if(document.getElementById('myDiv').style.display=''){document.getElementById('myDiv').style.display='none'} else { document.getElementById('myDiv').style.display=''; document.getElementById('myDiv2').style.display='none';document.getElementById('myDiv3').style.display='none'; document.getElementById('myDiv4').style.display='none'; document.getElementById('myDiv5').style.display='none';} return false; ">What is the FAQ?</a>

<div id="myDiv" style="display:none;">
   FAQ means Frequently Asked Question.
</div>
<a href="#" onclick="if(document.getElementById('myDiv').style.display=''){document.getElementById('myDiv2').style.display='none'} else { document.getElementById('myDiv1').style.display='none'; document.getElementById('myDiv2').style.display='';document.getElementById('myDiv3').style.display='none'; document.getElementById('myDiv4').style.display='none'; document.getElementById('myDiv5').style.display='none';} return false; ">FAQ number 2?</a>

 <div id="myDiv2" style="display:none;">
   FAQ Answer2.
</div>
TohoITAuthor Commented:
The finsl result does not meet all the requirements but it was helpful
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.