Invoke programmatically

[nico3333fr]

Invoke programmatically

[nico3333fr]

Hi,

thanks for your suggestion. I'm doing some tests and updates to make it possible. ;)

[nico3333fr]

The last commit added it: 67ddda9

van11yAccessibleAccordionAria(document.getElementById('newContent'));

[intelligence]

Awesome! Do you have any idea about an ETA?

[nico3333fr]

I can't promise anything, I hope to the end of this week, if everything goes fine.

[intelligence]

Oh no worries, was just curious if we were talking months, weeks or days :) 👍

[intelligence]

Awesome, thanks a lot!

Doesn't seem like latest update is available via npm, do you have to update something so it pulls the latest version?

[nico3333fr]

@intelligence my mistake, I forgot to update it yesterday. It is pushed, with a small update of documentation. https://www.npmjs.com/package/van11y-accessible-accordion-aria ;)

[intelligence]

Thanks for your prompt reply @nico3333fr!

I'm struggling with getting it to work though, can you maybe help out?
I'm importing your module like this:
const van11yAccessibleAccordionAria = require('van11y-accessible-accordion-aria');

I'm then calling it on my accordion (that works just fine if ajax fetching is not enabled, so markup and everything is correct).
van11yAccessibleAccordionAria(document.getElementById('accordion-subnavigation'));

This renders the console output

Uncaught TypeError: van11yAccessibleAccordionAria is not a function
    at Object.onEnter (common.js:804)
    at Object.<anonymous> (barba.js:816)
    at Object.trigger (barba.js:929)
    at Object.init (barba.js:1151)
    at Object.start (barba.js:1129)
    at Object.finalize (common.js:1118)
    at Router.fire (Router.js:22)
    at Router.loadEvents (Router.js:42)
    at HTMLDocument.<anonymous> (main.js:25)
    at i (jquery-1.12.4.min.js:2)

[intelligence]

If I simply do
import 'van11y-accessible-accordion-aria';

And then run

/* eslint-disable no-undef */
van11yAccessibleAccordionAria(document.getElementById('accordion-subnavigation'));
/* eslint-enable no-undef */

I get no error messages in the console, but no initialization either.

What am I doing wrong? :)

[intelligence]

Ah, sorry, didn't realize the div with the id should be wrapped around the elements. Works just fine now!

Thanks alot :)

[nico3333fr]

Yes, you found the solution before I was able to tell you, you're great 👍

If you don't mind, I've mentionned you in the announcement: https://van11y.net/2017/10/15/Version-2-0-for-accordion-script

[Alhadis]

Any of you guys feel like offering some constructive criticism and thoughts on my Accordion? 😉

It, uh, even supports IE8.

[nickpish]

Hi @nico3333fr - first off, thanks so much for this fantastic accordion library! I'm trying to get this working on a page that allows filtering content via Ajax, and thus reinitialize the accordions whenever the content refreshes. The filter plugin I'm using (FacetWP) provides an event, facet-wp-loaded that triggers when the content finishes refreshing, so I'm trying to re-initialize the accordions in this way, but I can't seem to get it working:

document.addEventListener("facetwp-loaded", function() {
    console.log('FWP loaded!');
    const accordion = new van11yAccessibleAccordionAria(document.getElementById('container'));
}, false);

I'm not sure if I'm invoking the accordion correctly or which container element I should initialize on, whether .js-accordion or one wrapping around that element? I've tried several, but none seem to work. Thank you for any assistance you're able to provide!

[nickpish]

For anyone who might be trying to achieve something similar to what I described above, I came up with a working solution using the following- note that in my case, the facetwp-loaded event runs on initial page load as well as after subsequent refreshes via Ajax, so I needed to ensure that the accordion wasn't already initialized by checking for the presence of the class with custom prefix (set via data-accordion-prefix-classes="prefix") as follows:

document.addEventListener("facetwp-loaded", function() {
  const container = document.querySelector("#container .js-accordion");
  if (!container.classList.contains("prefix-accordion") {
    // console.log('accordion NOT already initialized - now initializing!');
    const accordion = van11yAccessibleAccordionAria(document.getElementById('container'));
    accordion.attach();
  }
}, false);

There's likely a better way to do this, but it seems to work!