Would like to request adding breakpoints to the plugin to make responsive accordions easier to setup. I keep designing sites where accordions are used only for mobile menus, and I know how to setup this myself with handy collapse, but it would be a really nice feature. See https://swiperjs.com/swiper-api#param-breakpoints for example

Steps to recreate:

1. Add a radio button inside of a collapse container.
2. check the radio button
3. collapse the container and expand it again.

Expected result: the radio button is still checked
Actual result: the radio button is no longer checked

I discovered this bug in Chrome, but it does not happen in Safari. I did not test any other browsers. Only seems to affect radio buttons - no other input element. I suspected this could be some kind of chrome bug/feature, but I tested with some other collapse libraries and could not reproduce it.

Calling the open or close methods on a single element works perfectly:
myAccrodion.open("content01")

But calling the open or close methods on multiple elements does not work correctly:
myAccrodion.open("content01")
myAccrodion.open("content02")

It seems to open the space where the content exists, but the content is invisible.
(Basically, it causes the data-hc-content elements to have style attributes of max-height: none; visibility: hidden; when they should have max-height: none; visibility: visible;)

Any idea if I am doing something wrong or if this is a bug? Thank you for the cool package. 👍

For dynamic initialization, add destroy() method to remove EventListeners and object references.

ref. #30

Hi,

Do you have links hosted on CDN's?

thanks

• Reduced build size
• ESM support #28

When building a Vue component with Rollup, the error HandyCollapse is not a constructor is thrown in the browser.
It works though when called like this: new HandyCollapse.default(). After some digging, the problem is fixed if the module is built with webpack configuration below.

/* webpack.confg.js */
output: {
        path: esmOutputPath,
        publicPath: publicPath,
        filename: "[name].js",
        library: {
            type: 'umd',
            name: 'HandyCollapse',
            export: 'default',
            umdNamedDefine: true
        }
    }

Thought we'd share for anyone running into the same issue.

The hidden content (links, buttons) inside collapsible area can be traversed by tab key. Expected behavior is to navigate over control buttons if the content is hidden.

Problem

So far handy-collapse has been great, so thank you. However, I just ran into an issue when using the javascript open method directly.

Steps to re-create

1. create a simple collapse with one data-{namespace}-control="myID" and one data-{namespace}-content="myID"
2. It should be collapsed by default (no is-active class)
3. Add another button that calls handyCollapse.open('myID') when clicked
4. Click the button created in step 3, myID content will expand as expected
5. But now try using the original control created in step 1

Expected Result

myID content should collapse, and be controlled normally by the main control (data-{namespace}-control="myID")

Actual Result

myID content collapses and then instantly expands again when using the main control (data-{namespace}-control="myID")

Also note that the bug only occurs after the second button (created in step 3) is clicked.