• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 761
  • Last Modified:

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
0
TohoIT
Asked:
TohoIT
  • 4
  • 2
3 Solutions
 
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>
0
 
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?
0
 
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
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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...
0
 
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>
0
 
TohoITAuthor Commented:
The finsl result does not meet all the requirements but it was helpful
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now