5 ms·

JQuery Accordion: The missing responsive, CSS powered accordion plugin

24 points by vctrfrnndz 12y ago

deleted 12y ago
[deleted]
Edd314159 12y ago
Forgive my ignorance of terms, but how is this "CSS-powered" if it's a jQuery plugin?
- bendyorke 12y ago
  I believe he means that it uses CSS transitions, not javascript transitions. So the animations are what are, whenever possible, "CSS-powered"
- mathijs 12y ago
  I think what they mean is that you don't have to type any javascript yourself, such as setting onclick-listeners. At the top of the page it reads "CSS powered (jQuery fallback)", however, if jQuery fails to load (e.g. when visiting the https-version of the same page), it doesn't work. What I also don't understand is how this plugin was in any way 'missing'. It seems we had plenty already[1]. [1]: http://www.designrazzi.net/2014/free-jquery-accordion-menus-plugins/ http://www.designrazzi.net/2014/free-jquery-accordion-menus-...
  - Zikes 12y ago
    The animations are CSS powered, which takes advantage of GPU optimizations better than JS animations. If the browser does not support the necessary CSS animations then jQuery animations will be used. jQuery is still necessary for the logic behind implementing an accordion, but the "heavy lifting" is done in CSS where possible.
    - mathijs 12y ago
      Ah, thanks, that makes sense.
    - freshyill 12y ago
      Seeing an animation like this seems like such a trivial thing. It's like rounded corners. Is anybody wasting effort with background images or javascript to make rounded corners for old browsers? I can't imagine they are. If they are, they need to have the graceful degradation talk with their boss/client.
prayerslayer 12y ago
Maybe I misunderstand the issue, but... Well, everything is responsive at 100% width, right?
- planckscnst 12y ago
  No. Unfortunately, the author clearly doesn't get that. Responsive means that it is able to present an appropriate experience to different devices. Full width for this widget is not appropriate on a large screen.
josefdlange 12y ago
When connecting to your web page via HTTPS it attempts to load JQuery via HTTP and FireFox cowers in fear of XSS attempts. Don't do that.
ddebernardy 12y ago
Doesn't work on iPad... (1st gen)
- parkovski 12y ago
  Doesn't work in Chrome or Firefox on Windows 8.1 either. Strangely does work in IE though.
  - vctrfrnndz 12y ago
    Sorry. jQuery wasn't loading for the demo page on SSL, feel free to check it out now.
markdown 12y ago
Hello 2011. Using CSS for animation has been standard practice for 2 or 3 years now, and there have been CSS-only (no JS) accordions and tabs for yonks as well.
- tplpnm 12y ago
  http://css-tricks.com/myth-busting-css-animations-vs-javascript/ http://css-tricks.com/myth-busting-css-animations-vs-javascr...
- vctrfrnndz 12y ago
  Hi. CSS only accordions rely on having a fixed height and then having an animation for that container. Doesn't really work when you have variable content inside your tabs. This plugin just calculates your content's height and sets the value accordingly, refreshing the height when needed (on resize, orientation changes, etc), and then has a nice CSS transition for that element. I certainly didn't mean to reinvent the wheel doing this. Just felt there wasn't a plugin doing the same and found it useful. Thanks.
  - markdown 12y ago
    In that case, I'm sorry about being dismissive. I should have looked deeper into it. I assumed it was just another accordion and didn't get why it was newsworthy. It's good work, and you should be proud of it :)
thathonkey 12y ago
Sorry but this is not very impressive.
nailer 12y ago
A plain JS fork would be useful.
deleted 12y ago
[deleted]
Sephr 12y ago
Use the relative protocol (//) instead of http: for your jQuery script include, so HTTPS everywhere doesn't break your demo site.

24 points by vctrfrnndz 12y ago

deleted 12y ago

[deleted]

Edd314159 12y ago

Forgive my ignorance of terms, but how is this "CSS-powered" if it's a jQuery plugin?

bendyorke 12y ago
I believe he means that it uses CSS transitions, not javascript transitions. So the animations are what are, whenever possible, "CSS-powered"
mathijs 12y ago
I think what they mean is that you don't have to type any javascript yourself, such as setting onclick-listeners. At the top of the page it reads "CSS powered (jQuery fallback)", however, if jQuery fails to load (e.g. when visiting the https-version of the same page), it doesn't work. What I also don't understand is how this plugin was in any way 'missing'. It seems we had plenty already[1]. [1]: http://www.designrazzi.net/2014/free-jquery-accordion-menus-plugins/ http://www.designrazzi.net/2014/free-jquery-accordion-menus-...
- Zikes 12y ago
  The animations are CSS powered, which takes advantage of GPU optimizations better than JS animations. If the browser does not support the necessary CSS animations then jQuery animations will be used. jQuery is still necessary for the logic behind implementing an accordion, but the "heavy lifting" is done in CSS where possible.
  - mathijs 12y ago
    Ah, thanks, that makes sense.
  - freshyill 12y ago
    Seeing an animation like this seems like such a trivial thing. It's like rounded corners. Is anybody wasting effort with background images or javascript to make rounded corners for old browsers? I can't imagine they are. If they are, they need to have the graceful degradation talk with their boss/client.

prayerslayer 12y ago

Maybe I misunderstand the issue, but... Well, everything is responsive at 100% width, right?

planckscnst 12y ago
No. Unfortunately, the author clearly doesn't get that. Responsive means that it is able to present an appropriate experience to different devices. Full width for this widget is not appropriate on a large screen.

josefdlange 12y ago

When connecting to your web page via HTTPS it attempts to load JQuery via HTTP and FireFox cowers in fear of XSS attempts. Don't do that.

ddebernardy 12y ago

Doesn't work on iPad... (1st gen)

parkovski 12y ago
Doesn't work in Chrome or Firefox on Windows 8.1 either. Strangely does work in IE though.
- vctrfrnndz 12y ago
  Sorry. jQuery wasn't loading for the demo page on SSL, feel free to check it out now.

markdown 12y ago

Hello 2011. Using CSS for animation has been standard practice for 2 or 3 years now, and there have been CSS-only (no JS) accordions and tabs for yonks as well.

tplpnm 12y ago
http://css-tricks.com/myth-busting-css-animations-vs-javascript/ http://css-tricks.com/myth-busting-css-animations-vs-javascr...
vctrfrnndz 12y ago
Hi. CSS only accordions rely on having a fixed height and then having an animation for that container. Doesn't really work when you have variable content inside your tabs. This plugin just calculates your content's height and sets the value accordingly, refreshing the height when needed (on resize, orientation changes, etc), and then has a nice CSS transition for that element. I certainly didn't mean to reinvent the wheel doing this. Just felt there wasn't a plugin doing the same and found it useful. Thanks.
- markdown 12y ago
  In that case, I'm sorry about being dismissive. I should have looked deeper into it. I assumed it was just another accordion and didn't get why it was newsworthy. It's good work, and you should be proud of it :)

thathonkey 12y ago

Sorry but this is not very impressive.

nailer 12y ago

A plain JS fork would be useful.

deleted 12y ago

[deleted]

Sephr 12y ago

Use the relative protocol (//) instead of http: for your jQuery script include, so HTTPS everywhere doesn't break your demo site.