brentoncozby/dom-slider

Plain JavaScript version of jQuery's slideToggle(), slideDown(), & slideUp(), but does not use display: none.

dom-slider's Issues

How to reinit height?

If ill use slideDown, and after inside element change height (like add some items in spoiler), after slideUp and slideDOwn will bug, because start animation from old height.

Do not extend Object prototype

Why not just export the functions, like a normal library? Extending Object prototype is way too invasive, and especially in the way it is done here, it will affect every single for (let x in y) loop in the entire script, causing them to iterate over your functions.

Doesn't work if element is hidden by default via CSS

I was looking for something like this (thanks for writing it), but it doesn't look like it works if the element to be toggled is hidden by default using display: none

For instance, if this were to be used for a FAQ toggler, the answers wouldn't be revealed when the questions were clicked.

padding-top and padding-bottom is wrongly calculated

padding-top and padding-bottom is wrongly calculated when element is closed by default with display: none or DOM-slider-hidden

on the first opening the padding-top and padding-bottom is always 0px

SlideUp not working in Firefox

Hi, I discovered bug, that slideUp is not working properly.

Firefox version: 74.0.1 (64-bit)

Cannot redefine property: slideDown

Hi, I created a little script which uses "dom-slider" and working well "alone", but when I put on production website where there are many other scripts, including jQuery, I got this error:
Cannot redefine property: slideDown.

I research quickly and saw something related with "slideDown" (re)declaration (source).

I don't know it's a problem on my side, and there is a way to avoid this conflict, like the "dom-slider" method should work only my application scope.
Or if you could fix it following the idea on define configurable: true but we need to think on the "side-effects" from this change.

Let me know you think about this, please.

Thanks in advance

PS: there is a question and some comments, maybe could help us :)

Use requestAnimationFrame

This would be better than e.g. setTimeout:

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Collapsed content is still visible to screen readers

Hello! 👋

We're using dom-slider in @sparkdesignsystem and we're running into an accessibility issue. Because dom-slider does not use display: none when hiding the content, the content is still available to screen readers when it should be hidden. This is only the case after the contents are hidden by dom-slider; you may need to expand and then collapse a component to see this issue in action.

Steps to Reproduce using VoiceOver on macOS

1. Open example.html in a browser
2. Turn on VoiceOver (Cmd+F5, by default)
3. Refresh example.html to put VoiceOver focus in the page.
4. Use the VoiceOver navigation (Ctrl+Option+Arrows, by default) to scroll around the page. Note that the collapsed contents are not read by the screen reader.
5. Expand and Collapse a toggle using the VoiceOver trigger (Ctrl+Option+Space, by default)
6. Scroll around with VO navigation again and observe that the contents are still visible to screen readers even when hidden.

Conflicting with GSAP's CSSPlugin

Hey @BrentonCozby, when I load this plugin alongside with CSSPlugin from GSAP it throws a 'classList' of undefined error.