alenan2013 alenan2013 - 13 days ago 7
CSS Question

Answers collapsed under the questions on the FAQs page

I have a FAQs page (pure HTML). The questions have css class .pageSubtitle and the answers have two classes: .p1 and .p2. The example is:

<p class="pageSubtitle">Which Award should I apply for?</p>
<p class="p1">Centers that wish to be recognized for adhering to Guidelines and their Quality Programs and their Processes should apply for <span style="font-weight: bold;">The Center of Excellence in Life Support Award.</span>
These programs must meet or exceed criteria in the following categories:
</p>

<p class="p2">o Systems Focus</p>
<p class="p2">o Environmental Focus</p>
<p class="p2">o Workforce Focus</p>
<p class="p2">o Knowledge Management</p>
<p class="p2">o Quality Focus</p>
<p class="p2">o Process Optimization</p>
<p class="p2">o Family Focus</p>


On this FAQ page, the users want to have the answers collapsed under the questions and when you click on a question the answer appears under it. How can I do that? Thank you in advance for any help.

Answer

I finally found the solution that works fine:

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.p1, .p2, .p3, .p4').hide(); 
$('.pageSubtitle').click(function(){ 
$(this).nextUntil('.pageSubtitle').toggle();
 }); 
 }); </script>