Question

I have seen many scripts for accordion on the internet, but haven’t found anything which meets my needs. I want to make a plugin for accordion just like that which Facebook uses. It should work like this:

1. Click to open and close.
2. Add style class while open.
3. Close upon an outside click. It should not close when click event is inside the accordion box.

Is there any way to achieve this? Please help if you know. I am new to jQuery…

Thanks in advance.

Answer 1

No need for a plug-in when 15 lines of code will solve it: it’s about changing the order of the click events that trigger on a specific DOM element and on the window using setTimeout.

var ShowingAccordion = false;

$(document).ready(function () {
    
       $('.MyAccordionOpener').click(function () {
    
             if ($(this).next('.MyAccordion').is(':visible') === false) {

                 ShowingAccordion = false;
                 $('.MyAccordion').hide(500);
                 $(this).next('.MyAccordion').addClass('SomeClass');
                 $(this).next('.MyAccordion').show(500);
                 setTimeout(function () { ShowingAccordion = true; }, 1);
             }
       });
    
       $('.MyAccordion').click(function () {
        
             ShowingAccordion = false;
             //this is the line that solves your problem
             setTimeout(function () { ShowingAccordion = true; }, 1);
       });
        
    
       $(document).click(function () { 
   
           if (ShowingAccordion === true) {     

               $('.MyAccordion').hide(500);
               ShowingAccordion = false;
           }    
       });
});

And here’s the demo

If it does what you need then you can accept the answer and happy coding!