FAQ jQuery function trouble

FAQ jQuery function trouble

I am trying to finesse a FAQ section in Wordpress using jQuery, but am stuck on the last part of the function.

We have categories, which have questions, and each question has an answer.

At start, all elements are closed.

Each element opens as it is clicked.

Each category will close when it is clicked a 2nd time.

Here is the test page so far:

http://www.maxwellparknc.org/faqs/

What I can't figure out is how to get the answers that have opened to close when the category is closed.

I can't figure out how to get them to close ONLY in the category that is clicked a 2nd time to be closed.

I'd like to avoid adding any more markup.

Thank you very much for any help!


Here is the function:

  1. // Toggle like function for the FAQ section. It only works sequentially, meaning that one section and one question can be open at any one time. If a new section is clicked, any
  2. // previously opened section (and question in that section) will close.  Questions within sections work the same way.
  3. // This function also closed any answers that are open in a category when the category closes
  4.      
  5.         // toggle funcion for the categories
  6.         //on dom ready we load the function and include $ in the parameter
  7.         jQuery(document).ready(function($){
  8.             //We then hide the divs we want to collapse
  9.            // $('.questions',this).hide();
  10.             //then we make the function that activates when clicking .section classes
  11.             $('.section').click(function(){
  12.               //now we toggle the hidden classes 
  13.               $(this).next('.questions').slideToggle();
  14.               $(this).toggleClass('section');
  15.               $(this).toggleClass('sectionOpen');
  16.               $('.answer').slideUp(500,'linear');
  17.               //stop propagation
  18.               return false;
  19.             }); //close
  20.         }); //close



Here is the FAQ markup (reduced):



  1. <div id="faqs" class="accordian">
  2.     <a href="#" class="section">How You Can Help MPNC</a>
  3.     <div class="questions">
  4.         <a href="#" class="questionLink">Question Number One?</a>
  5.             <div class="answer">
  6.                 Mauris nibh ipsum, malesuada a sem vitae, euismod interdum nisl. Nulla facilisi. Donec lorem tellus, laoreet quis arcu ac, volutpat sollicitudin tellus. Nullam porttitor suscipit volutpat. Aenean non fermentum dolor, in placerat arcu. Etiam non feugiat arcu. Suspendisse eleifend pretium bibendum. Cras vestibulum nibh sed gravida blandit. In hac habitasse platea dictumst. Praesent placerat, diam id varius tempus, lorem erat tempor sapien, et vestibulum quam lacus et urna. Integer in laoreet enim. Morbi quis dui vel nisi suscipit pretium. Morbi hendrerit felis in convallis tempor. Nam a consectetur metus. Cras luctus, nunc a cursus euismod, lacus ipsum faucibus risus, nec interdum nisl lorem ut purus. Cras sed odio diam.
  7.                 <a href="/" class="close">Close answer X</a>
  8.             </div>
  9.         <a href="#" class="questionLink">Question Number Two?</a>
  10.             <div class="answer">
  11.                 Mauris nibh ipsum, malesuada a sem vitae, euismod interdum nisl. Nulla facilisi. Donec lorem tellus, laoreet quis arcu ac, volutpat sollicitudin tellus. Nullam porttitor suscipit volutpat. Aenean non fermentum dolor, in placerat arcu. Etiam non feugiat arcu. Suspendisse eleifend pretium bibendum. Cras vestibulum nibh sed gravida blandit. In hac habitasse platea dictumst. Praesent placerat, diam id varius tempus, lorem erat tempor sapien, et vestibulum quam lacus et urna. Integer in laoreet enim. Morbi quis dui vel nisi suscipit pretium. Morbi hendrerit felis in convallis tempor. Nam a consectetur metus. Cras luctus, nunc a cursus euismod, lacus ipsum faucibus risus, nec interdum nisl lorem ut purus. Cras sed odio diam.
  12.                 <a href="/" class="close">Close answer X</a>
  13.             </div>
  14.            
  15.         <a href="#" class="questionLink">Question Number Three?</a>
  16.             <div class="answer">
  17.                 Mauris nibh ipsum, malesuada a sem vitae, euismod interdum nisl. Nulla facilisi. Donec lorem tellus, laoreet quis arcu ac, volutpat sollicitudin tellus. Nullam porttitor suscipit volutpat. Aenean non fermentum dolor, in placerat arcu. Etiam non feugiat arcu. Suspendisse eleifend pretium bibendum. Cras vestibulum nibh sed gravida blandit. In hac habitasse platea dictumst. Praesent placerat, diam id varius tempus, lorem erat tempor sapien, et vestibulum quam lacus et urna. Integer in laoreet enim. Morbi quis dui vel nisi suscipit pretium. Morbi hendrerit felis in convallis tempor. Nam a consectetur metus. Cras luctus, nunc a cursus euismod, lacus ipsum faucibus risus, nec interdum nisl lorem ut purus. Cras sed odio diam.
  18.                 <a href="/" class="close">Close answer X</a>
  19.             </div>
  20.         <a href="#" class="questionLink">Question Number Four?</a>
  21.             <div class="answer">
  22.                 Mauris nibh ipsum, malesuada a sem vitae, euismod interdum nisl. Nulla facilisi. Donec lorem tellus, laoreet quis arcu ac, volutpat sollicitudin tellus. Nullam porttitor suscipit volutpat. Aenean non fermentum dolor, in placerat arcu. Etiam non feugiat arcu. Suspendisse eleifend pretium bibendum. Cras vestibulum nibh sed gravida blandit. In hac habitasse platea dictumst. Praesent placerat, diam id varius tempus, lorem erat tempor sapien, et vestibulum quam lacus et urna. Integer in laoreet enim. Morbi quis dui vel nisi suscipit pretium. Morbi hendrerit felis in convallis tempor. Nam a consectetur metus. Cras luctus, nunc a cursus euismod, lacus ipsum faucibus risus, nec interdum nisl lorem ut purus. Cras sed odio diam.
  23.                 <a href="/" class="close">Close answer X</a>
  24.             </div>
  25.     </div>
  26.     <a href="#" class="section">Crime Prevention</a>
  27.     <div class="questions">
  28.         <a href="#" class="questionLink">Question Number One?</a>
  29.             <div class="answer">
  30.                 Mauris nibh ipsum, malesuada a sem vitae, euismod interdum nisl. Nulla facilisi. Donec lorem tellus, laoreet quis arcu ac, volutpat sollicitudin tellus. Nullam porttitor suscipit volutpat. Aenean non fermentum dolor, in placerat arcu. Etiam non feugiat arcu. Suspendisse eleifend pretium bibendum. Cras vestibulum nibh sed gravida blandit. In hac habitasse platea dictumst. Praesent placerat, diam id varius tempus, lorem erat tempor sapien, et vestibulum quam lacus et urna. Integer in laoreet enim. Morbi quis dui vel nisi suscipit pretium. Morbi hendrerit felis in convallis tempor. Nam a consectetur metus. Cras luctus, nunc a cursus euismod, lacus ipsum faucibus risus, nec interdum nisl lorem ut purus. Cras sed odio diam.
  31.                 <a href="/" class="close">Close answer X</a>
  32.             </div>
  33.         <a href="#" class="questionLink">Question Number Two?</a>
  34.             <div class="answer">
  35.                 Mauris nibh ipsum, malesuada a sem vitae, euismod interdum nisl. Nulla facilisi. Donec lorem tellus, laoreet quis arcu ac, volutpat sollicitudin tellus. Nullam porttitor suscipit volutpat. Aenean non fermentum dolor, in placerat arcu. Etiam non feugiat arcu. Suspendisse eleifend pretium bibendum. Cras vestibulum nibh sed gravida blandit. In hac habitasse platea dictumst. Praesent placerat, diam id varius tempus, lorem erat tempor sapien, et vestibulum quam lacus et urna. Integer in laoreet enim. Morbi quis dui vel nisi suscipit pretium. Morbi hendrerit felis in convallis tempor. Nam a consectetur metus. Cras luctus, nunc a cursus euismod, lacus ipsum faucibus risus, nec interdum nisl lorem ut purus. Cras sed odio diam.
  36.                 <a href="/" class="close">Close answer X</a>
  37.             </div>
  38.            
  39.         <a href="#" class="questionLink">Question Number Three?</a>
  40.             <div class="answer">
  41.                 Mauris nibh ipsum, malesuada a sem vitae, euismod interdum nisl. Nulla facilisi. Donec lorem tellus, laoreet quis arcu ac, volutpat sollicitudin tellus. Nullam porttitor suscipit volutpat. Aenean non fermentum dolor, in placerat arcu. Etiam non feugiat arcu. Suspendisse eleifend pretium bibendum. Cras vestibulum nibh sed gravida blandit. In hac habitasse platea dictumst. Praesent placerat, diam id varius tempus, lorem erat tempor sapien, et vestibulum quam lacus et urna. Integer in laoreet enim. Morbi quis dui vel nisi suscipit pretium. Morbi hendrerit felis in convallis tempor. Nam a consectetur metus. Cras luctus, nunc a cursus euismod, lacus ipsum faucibus risus, nec interdum nisl lorem ut purus. Cras sed odio diam.
  42.                 <a href="/" class="close">Close answer X</a>
  43.             </div>
  44.     </div>
  45. </div>  <!-- END FAQs ID -->