Question

I’m wanting to show content when a button is clicked, when another panel is shown it needs to close any other panels that are open while also allowing you to close the current panel when clicked again, leaving none showing.

This is working apart from the collapse of the opened panel which is what Im looking for help with.

Any ideas?

jQuery

 var propertyPanelExpanded;
 var expandPanel; 

 function ResultsToggle() {
    expandPanel.parent().next("div.AnswerFAQ").toggle(); 
 }

 $(document).ready(function () {
    $('.Expand').live('click', function () {
        $('.Expand').each(function(){
                if($(this).parent().next("div.AnswerFAQ").is(":visible")){
                    expandPanel = $(this)
                    ResultsToggle()
                }
        })
        expandPanel = $(this)
        ResultsToggle()    
    });    
});​

HTML

 <h3>
     Title 1         
     <span class="Expand">
     CLICK HERE
     </span></h3>
     <div class="AnswerFAQ" style="display:none;">
     <p>Content 1</p> 
 </div>

 <h3>
     Title 2         
     <span class="Expand">
         CLICK HERE
     </span></h3>
     <div class="AnswerFAQ" style="display:none;">
     <p>Content 2</p> 
 </div>

Heres the jsfiddle: http://jsfiddle.net/huddds/HYB2r/2/

Thanks in advance for any responses
​

Answer 1

I am not much clear what exactly you wanted. Do you want to close the content when same is clicked twice ?Please check the working code here.

I just added one line of jquery there.

   $(this).parent().next("div.AnswerFAQ").toggle('display'); 

Is it what you wanted?