jQuery Accordion Populate Table on Change

Question

I have a page with several accordion tabs on it and lots of data. I would like to fire a function that populates my tables when the user changes tabs. I am currently populating all the content at load time, which is really slow and inefficient. I have tried the following:

$( "#accordion" ).accordion({ beforeActivate: popdata }); - Activates only once.
$( "#accordion" ).accordion({ activate: popdata }); - Acts as a click.
$( "#accordion" ).change() - Depricated
$( "#accordion" ).click(); - Acts as a click.
$( "#accordion" ).header(); - Not Applicable
$( "#accordion" ).trigger(); - Acts as a click.
$( "#accordion" ).click( function ( event ) { event.currentTarget }; - Only lists the div.
$( "#accordion" ).bind('accordionchange', yourFunction); - Depricated

The click and activate events fire when the user clicks anywhere on the accordion. I would need to limit it to the headers or tabs, but can't find the code to do so. The beforeActivate only fires once.

Is anyone able to suggest something? I've event tried to create my own event. Is there a way to filter the click event to determine if the user clicked on a ui-accordion-header?

Answer 1

I will admit I am "old school" when it comes to jQuery but I find the simple solutions the best.

$(document).ready(function($) {
  $('#accordion').find('.accordion-toggle').click(function() {
    // Expand or collapse this panel
    $(this).next().slideToggle('fast');

    // Hide the other panels
    $(".accordion-content").not($(this).next()).slideUp('fast');
  });
});

All thanks go to this simple accordion solution with jQuery