• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 704
  • 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 recovery tool for Microsoft Active Directory

Veeam Explorer for Microsoft Active Directory provides fast and reliable object-level recovery for Active Directory from a single-pass, agentless backup or storage snapshot — without the need to restore an entire virtual machine or use third-party tools.

 
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

Featured Post

Free learning courses: Active Directory Deep Dive

Get a firm grasp on your IT environment when you learn Active Directory best practices with Veeam! Watch all, or choose any amount, of this three-part webinar series to improve your skills. From the basics to virtualization and backup, we got you covered.

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