It would be usefull if we had bare-bones version of css, just with animations and nothing like background color, font size etc.

Some functional pictures, gif, or demo link would be very helpful!

I'm getting this alert in the latest version of Lighthouse:

[aria-*] attributes do not match their roles

Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more.

Failing elements:

<div class="handorgel" id="handorgel1" aria-multiselectable="true">

I'm not very good with aria stuff, so I'm not exactly sure what the problem is, but the alert seems to indicate that it's the multiselectable attribute. Perhaps a role needs added to the container as well?

If this is something I can fix on my end, please do let me know, I just don't have much experience with aria so I'm not sure where to even find the appropriate documentation.

I have the footnotes for a financial table hidden inside an accordion. It works great, but I want to be able to anchor the notes in the table down to the accordion, which will then open.

(The functionality of how the accordion opens is less important than it opening.)

I realise this may be outside of the accordion's scope, but thanks for getting this far.

Love the library, one thing I noticed in the documentation. To properly import SASS from node_modules directory the code should be formatted like @import '~handorgel/src/style';

It'd be awesome if we could specify our own classes for each element of the handorgel instance. Something like:

{
    containerClass: 'handorgel',
    headerClass: 'handorgel__header',
    buttonClass: 'handorgel__header__button',
    contentClass: 'handorgel__content',
    contentInnerClass: 'handorgel__content__inner',
}

Some notes:

• containerClass may not be necessary, because I think it's specified in the first parameter that gets passed.
• I'm not sure if all classes are 100% necessary as it is, so some of these may be pointless to add. If I recall correctly, I think only the container, button, and content elements are truly required, but I'll have to double check when I get moment.

If you'd like, I can look in to what it would take to implement and possibly submit a pull request.

Package version: 0.4.9

JS

const handorgel = require('handorgel');
const options = {
  multiSelectable: true
}
var h = new handorgel(document.querySelector('.handorgel'), options);

Error image link

i needed to place these accordion inside a form and the fact
that i cant choose the trigger element by type / class is a problem.

Anyway around that?

While using Nested accordions like:

---accordion A

--accordion A.1
--accordion A.2
--accordion A.3

--accordion B

--accordion B.1
--accordion B.2

If I am trying to open accordion A.1 after opening accordion A i.e the parent accordion. The height of the content of accordion A "the parent accordion" is not getting recalculated.

Resulting the content of Accordion A.1 to overflow out of the accordion A content's allocated height. Which is breaking the view.

So the question is:
Is it feasible to nest the accordions using Handorgel?

• If No: Fine.
• If Yes: How to solve this issue?

Hi! First thank you for your work!
I am trying to use handorgel inside another handorgel. It actually does not even have to be handorgel just anything that changes height.

The issue is that obviously the height of content is fixed px number. I understand this is needed for the animation back. The solution probably would be to have middlestep with height: auto. I am wondering if you've given this any thought - maybe its a bad idea.

var accordion = new handorgel(el, {});
accordion.on('fold:opened', (fold) => {
	fold.content.style.height = 'auto';
});

accordion.on('fold:close', (fold) => {	
	fold.content.style.height = fold.content.offsetHeight + 'px';
});

This naive solution works for the nested handorgel the parent handrogel.content is height: auto so it works nicely. The problem si closing - first the event seems to fire after the resize so it animates instantly it goes from height: auto to height: 0px. Then there are things like the resize that has to also use 'auto'. But i am just wondering if there is some reason why you didn't go for this kind of implementation? Is it better to solve nesting by using events and recalculate parent handorgel accordigly (this approach seemed to work even worse for me)?

Hi, thanks a lot for this great plugin!
Is it possible to activate Handorgel only on certain viewports?
(The content should nevertheless be displayed on all viewports.)

In some cases, the --open classes aren't removed once a handorgel is closed. I'm having difficulty figuring out exactly when this happens, but it seems to happen more often when you quickly open and close. In the screenshot below, you can see that the handorgel__content has height: 0px; set, but both it and its related handorgel__header both still have their --open modifiers. This may be Firefox specific; the issue occurs in Firefox Developer Edition 84.0b4, but not in Chrome 87.0.4280.66 (both tested on Windows 10). I haven't had a chance to test in other browsers yet.

Currently Handorgel sets the .handorgel__content element to height: auto after the opening transition, presumably so that the wrapper's height will be correct when the viewport is resized etc.

However, this means there can't be a close animation as you cannot transition from height: auto to height: 0. Would it make sense to change Handorgel so that it does not set height: auto after the opening transition? Or am I missing something?

Currently the script is not compatible with IE10 and I can't find the problem. I guess it's in the function proto.emitEvent. But I'm not sure. Can you have a look please?

How can I make it works with markup like this one:

<div class="handorgel">
  <div class="card>
    <h3 class="handorgel__header">
      <button class="handorgel__header__button">
        Title
      </button>
    </h3>
    <div class="handorgel__content" data-open>
      <div class="handorgel__content__inner">
        Content openened by default
      </div>
    </div>
  </div>
  <div class="card>
    <h3 class="handorgel__header">
      <button class="handorgel__header__button">
        Title
      </button>
    </h3>
    <div class="handorgel__content" data-open>
      <div class="handorgel__content__inner">
        Content openened by default
      </div>
    </div>
  </div>
</div>

?

Hi there

I seem to have done everything to make it work, but I am getting the above JS error on this page:

http://rimesweb.staging.wpengine.com/privacy-confidentiality-2/

Ta for any help!

It seems like it would make things a lot easier if the handorgel__header element could be auto generated based on the handorgel__content if it had a data-handorgel__header to specify the header text.

Have you considered this?

:-)