a canadian startup

jQuery: css accordion menu in 4 lines

yesterday, chris suggested i consider using an accordion menu on our new, improved left navigation (not yet released). i was sort of “meh” about it — i don’t like extra UI, moving things, extra javascript, or things that don’t work on our customer’s old versions of internet explorer -1.2.

but whatever, i thought i’d take a look.

4 lines of code later, and no changes to the actual css or webpage, i had a working accordion menu:

and to make it slide up and down, i did this:

jQuery is awesome. awesome. the documentation is clear (there will always be a learning curve for a tool like this. i feel their demos and tutorials aren’t that good in terms of figuring out where to start, but once you get the hang of things, the docs are great for finding what you need, quick.)

i might do a talk about the awesomeness of jquery at the next guelph democamp. i am totally in love with this AJAX and DOM scripting javascript toolkit.

i have used prototype.js in the past, but heard great things about jQuery. we started using it internally about 3 weeks ago, and are considering using it on the front-end of our site in our next version.

—————-

UPDATE:

just figured out that i could’ve used [...].slideToggle() to toggle sliding. dunno why i didn’t see that.