Toggle DIV with JQuery I have a FAQ area on my page that has all of the questions in a list and when a user clicks on a title, a DIV with the answer will expand into view. However, I'm having trouble when it comes to closing the answer DIV layer. One of two things happen...
This one will simply open and close each DIV layer individually therefore multiple answers can be open at once. I want only one open, when a user either clicks the same title or another title, the currently open layer should collapse.
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".faq_answer").hide();
  jQuery(".faq_heading").click( function() {
    jQuery(this).next(".faq_answer").slideToggle(500);
  });
});
</script>

This one will collapse whatever layer is currently open when another title is clicked (which is good). However, when the SAME title is clicked it closes it and then reopens it.
<script type="text/javascript">
jQuery(document).ready( function() {
  jQuery(".faq_answer").hide();
  jQuery(".faq_heading").click( function() {
    jQuery(".faq_answer").hide(500);
    jQuery(this).next(".faq_answer").slideToggle(500);
  });
});
</script>


Inside your click handler, instead of this:
jQuery(".faq_answer").hide(500);

Try this:
jQuery(".faq_heading").not(this).next(".faq_answer").hide(500);