JQuery accordion is useful and nice-to-have function when you are building a website’s menu. For those of you looking for quick tips, this is what I usually recommend.

What is jQuery accordion and how is it used?

It’s called “accordion” because of how it looks. Few tabs (or panels) are placed vertically or horizontally and when you select each tab, it expands like an accordion, displaying the text inside. I tend to use them for global navigation. It’s useful in a way to make your page looks organized yet informative, containing detailed for people who wants to know more.

If you search on the web, there are many samples with different styles and designs. I found this simple jQuery tutorial from css-tricks.com very easy to understand.

I hope it helps you too. Good Luck coding!

See the Pen Simple jQuery Accordion v2 by Avelino P. Tiu III (@thirdtiu) on CodePen.