
JQuery Accordion: The missing responsive, CSS powered accordion plugin - vctrfrnndz
http://vctrfrnndz.github.io/jquery-accordion/
======
markdown
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.

~~~
vctrfrnndz
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
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 :)

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

~~~
planckscnst
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
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.

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

------
thathonkey
Sorry but this is not very impressive.

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

~~~
parkovski
Doesn't work in Chrome or Firefox on Windows 8.1 either. Strangely does work
in IE though.

~~~
vctrfrnndz
Sorry. jQuery wasn't loading for the demo page on SSL, feel free to check it
out now.

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

~~~
mathijs
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-...](http://www.designrazzi.net/2014/free-jquery-accordion-menus-
plugins/)

~~~
Zikes
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.

~~~
freshyill
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.

------
nailer
A plain JS fork would be useful.

