Create accordions, tabs, dropdowns, popups, and scroll changes with a few lines of jQuery code.
Recently, I wrote a beginner’s guide to using and understanding jQuery for Digital Ocean. I found the official jQuery documentation difficult to understand, especially for beginners who only know HTML and CSS. My intent was to make a simple, easy to follow tutorial to introduce the concept of jQuery.
When I first started learning, I would often want to do something simple and common with jQuery, but when I searched I’d find code samples that were very complicated or confusing. Below, I’ve compiled a few examples, with and without CSS styling, for a some common jQuery tasks: accordions, tabs, popups, dropdowns, and navigation that changes when you scroll to an ID. The non-stylized examples will only have the CSS required to make the demo function.
If you don’t know how to use jQuery at all, please read the Introduction to jQuery article first. The embedded demos might not display perfectly on a mobile device, so it’s better to view this post on desktop, or open the demos separately.
Accordion
An accordion is a list of headers that open and collapse more content when clicked. I chose to make my example have each section stay open when you click, but some versions only have one content panel open at a time.
