sk-rt / handy-collapse Goto Github PK
View Code? Open in Web Editor NEWA pure Javascript module for accordion/collapse UI without jQuery
Home Page: https://handy-collapse.netlify.com/
License: MIT License
A pure Javascript module for accordion/collapse UI without jQuery
Home Page: https://handy-collapse.netlify.com/
License: MIT License
So far handy-collapse has been great, so thank you. However, I just ran into an issue when using the javascript open method directly.
myID content should collapse, and be controlled normally by the main control (data-{namespace}-control="myID")
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.
Hi,
Do you have links hosted on CDN's?
thanks
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.
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
Steps to recreate:
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.
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.