Question

I wrote an alternative to the jQuery Accordion, as that didn’t offer multiple open section support (any idea why they opted to not include support for that? What’s the history there?). I did some research on StackOverflow, as well on Google to see what other options others came up. I needed something that could be used on the fly on multiple elements.

After seeing several solutions and experimenting with them, in the end, I wrote my own version (based on Kevin’s solution from http://forum.jquery.com/topic/accordion-multiple-sections-open-at-once , but heavily modified).

jsFiddle can be found here: http://jsfiddle.net/3jacu/1/

Inline Code:

$(document).ready(function(){

$.fn.togglepanels = function(){
    return this.each(function(){
        h4handler = $(this).find("h4");
        $(h4handler).prepend('<div class="accordionarrow">&#9660;</div>');
        $(h4handler).click(function() {
            $(h4handler).toggle(
                function() {
                    barclicked = $(this);
                    $(barclicked).find(".accordionarrow").html('&#9658;');
                    $(barclicked).next().slideUp('slow');
                    window.console && console.log('Closed.');
                    return false;
                }, 
                function() {
                    barclicked = $(this);
                    $(barclicked).find(".accordionarrow").html('&#9660;');
                    $(barclicked).next().slideDown('slow');
                    window.console && console.log('Open.');
                    return false;
                }
            );
        });
    });
};

$("#grouplist").togglepanels(); }

Oddly, the accordion arrow at the right side stopped working once I pasted it in jsFiddle, while it works in my local copy.

In any case, the issue is that toggling isn’t working as expected, and when it does, it fires duplicate toggle events which result in it closing, opening, then ultimately closing the section and it won’t open from that point on (it toggles open then closes back). That’s assuming it works! At first, it won’t work as it doesn’t respond. I think there’s a logic error somewhere I’m missing.

From what I wrote/see in the code, it searches the given handle for the corresponding tag (in this case, h4), pops the handle into a variable. It then adds the arrow to the h4 tag while applying the accordionarrow class (which floats it to the right). It then adds a click event to it, which will toggle (using jQuery’s toggle function) between two functions when h4 is clicked.

I suspect the problem here is that I may be mistakenly assuming jQuery’s toggle function will work fine for toggling between two functions, that I’ll have to implement my own toggle code. Correct me if I’m wrong though!

I’m trying to write the code so it’ll be as efficient as possible, so feedback on that also would be appreciated.

Thanks in advance for your time, assistance, and consideration!

Answer 1

You have the toggle binding (which is deprecated by the way) inside of the click binding, so a new event handler is getting attached every time you click the header.

As a random aside you should also fire events within the plugin (where you have the console lines would make sense) so that external code can react to state changes.