StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWrote alternative to jQuery Accordion, it spazzed. Why?
text
Body
copied!<p>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. </p> <p>After seeing several solutions and experimenting with them, in the end, I wrote my own version (based on Kevin's solution from <a href="http://forum.jquery.com/topic/accordion-multiple-sections-open-at-once" rel="nofollow">http://forum.jquery.com/topic/accordion-multiple-sections-open-at-once</a> , but heavily modified). </p> <p>jsFiddle can be found here: <a href="http://jsfiddle.net/3jacu/1/" rel="nofollow">http://jsfiddle.net/3jacu/1/</a></p> <p>Inline Code:</p> <pre><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(); } </code></pre> <p>Oddly, the accordion arrow at the right side stopped working once I pasted it in jsFiddle, while it works in my local copy. </p> <p>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. </p> <p>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. </p> <p>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!</p> <p>I'm trying to write the code so it'll be as efficient as possible, so feedback on that also would be appreciated. </p> <p>Thanks in advance for your time, assistance, and consideration!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload