Databases
StackOverflow2013
Postsdbo
POWrote alternative to jQuery Accordion, it spazzed. Why?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWrote alternative to jQuery Accordion, it spazzed. Why?
    primarykey
    data
    text
    <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('&lt;div class="accordionarrow"&gt;&amp;#9660;&lt;/div&gt;'); $(h4handler).click(function() { $(h4handler).toggle( function() { barclicked = $(this); $(barclicked).find(".accordionarrow").html('&amp;#9658;'); $(barclicked).next().slideUp('slow'); window.console &amp;&amp; console.log('Closed.'); return false; }, function() { barclicked = $(this); $(barclicked).find(".accordionarrow").html('&amp;#9660;'); $(barclicked).next().slideDown('slow'); window.console &amp;&amp; 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>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USDon Cullen
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COhey, your jsfiddle is missing a final `);` to close the document ready call, that's why nothing is working at the moment.
      singulars
      1. POWrote alternative to jQuery Accordion, it spazzed. Why?
      1. USkieran
    2. COAs far as general code style and efficiency goes you'd be better off working off of existing code. Your variable scoping is shaky. You should be using the `event` object (as a parameter) to target your event handlers (`event.target` or `event.currentTarget`). Using `this` is less certain and carries less intent. You have extraneous jQuery wrapping which is entirely wasteful: after `barclicked = $(this);` just use `barclicked` without the `$()` which wraps what is already a wrapper each time (or even better use `$barclicked` to signify that that is a wrapper).
      singulars
      1. POWrote alternative to jQuery Accordion, it spazzed. Why?
      1. USMatt Whipple
    3. COYou also shouldn't be attaching handlers directly to the elements, but instead using `.on` and matching `click`s with the proper selector. The visibility can then be modified using the still supported other `toggle` method (http://api.jquery.com/toggle/), and the arrow swapped on the callback. Unless there's a good reason not to the arrow would likely also be better initially added using CSS and markup (and having it within the h4 could be misleading from a conventional and a semantic standpoint). Also make sure to look at the HTML5 `detail` element if you aren't aware of it.
      singulars
      1. POWrote alternative to jQuery Accordion, it spazzed. Why?
      1. USMatt Whipple
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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