Skip to content

Please document how to open/close sections programmatically #8

@nk9

Description

@nk9

It would be really helpful to have a bit in the docs which explains how to use this library to programmatically open/close sections. I have worked out a way to do it, but I'm not sure if there's a better way which the library expects.

Note, I've found that when you programmatically open a section, other open sections do not close, even if closeOther is set to true. (Not sure whether this is a bug, though.)

For the curious, here's my solution:

    // Initialize the accordion
    jQuery(document).ready(function($){
        $("#my-accordion").accordionjs({
          activeIndex : false,
          openSection: myOpenAccordionSection,
        });

and then later, close open sections and open another:

      var newSection = $("#my-inner-content")[0].closest('.acc_section');
      var acc = $('.accordionjs').accordionjs({activeIndex: false});

      // Close all open sections which aren't the one that's been selected
      acc.closeOtherSections($(newSection), 0);

      // Open the selected section only if it isn't already
      if (! $(newSection).hasClass('acc_active')) {
        acc.openSection($(newSection), 0);
      }

NB: You have to pass things like "activeIndex" again when you re-instantiate the accordion to call methods on it. The alternative, I guess, is to put them in the HTML as data- attributes or to store the original variable instantiated in document.ready.

And for those Googling, this will not work because you haven't called accordionjs() on it:

var newSection = $('#my-inner-content')[0].closest('.acc_section');
$(".accordionjs").openSection($(newSection), 0);

This throws Uncaught TypeError: $(...).openSection is not a function.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions