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. I may have a slight affinity for the word accordion in general...

$ ( '.accordion' ) . on ( 'click' , '.accordion-header' , function ( ) { $ ( this ) . toggleClass ( 'active' ) . next ( ) . slideToggle ( ) } )

Tabs

Tabs are a form of navigation that switches the content inside a panel. I had a little fun with the style in the demo, but usually they resemble the tabs you might see on a Manila folder.

$ ( '.tab-list' ) . on ( 'click' , '.tab' , function ( e ) { e . preventDefault ( ) $ ( '.tab' ) . removeClass ( 'active' ) $ ( '.tab-content' ) . removeClass ( 'show' ) $ ( this ) . addClass ( 'active' ) $ ( $ ( this ) . attr ( 'href' ) ) . addClass ( 'show' ) } )

Dropdown

A dropdown is a menu that toggles when you click on it. It's usually indicated by a downward facing arrow.

$ ( 'html' ) . click ( function ( ) { $ ( '.dropdown' ) . hide ( ) } ) $ ( 'nav ul li a:not(:only-child)' ) . click ( function ( e ) { $ ( this ) . siblings ( '.dropdown' ) . toggle ( ) $ ( '.dropdown' ) . not ( $ ( this ) . siblings ( ) ) . hide ( ) e . stopPropagation ( ) } )

A modal is a dialog box that pops up on the screen, usually blocking access to rest of the content until you interact with it in some way. This is often used like an updated alert() function.

$ ( '.open' ) . on ( 'click' , function ( ) { $ ( '.overlay, .modal' ) . addClass ( 'active' ) } ) $ ( '.close, .overlay' ) . on ( 'click' , function ( ) { $ ( '.overlay, .modal' ) . removeClass ( 'active' ) } ) $ ( document ) . keyup ( function ( e ) { if ( e . keyCode === 27 ) { $ ( '.overlay, .modal' ) . removeClass ( 'active' ) } } )

Change on Scroll

Sometimes you might want to change an element (in this case, the navigation) after scrolling to a certain point. You might want to change th color, or shrink the nav, or make it stick to the top.

$ ( window ) . on ( 'scroll' , function ( ) { var position = $ ( '#begin' ) . offset ( ) if ( $ ( window ) . scrollTop ( ) > position . top - 80 ) { $ ( 'nav' ) . addClass ( 'active' ) } else { $ ( 'nav' ) . removeClass ( 'active' ) } } )

Bonus

Here are two more examples that I was too lazy to stylize.

Conclusion

I hope you found this group of demos fun and helpful. I believe everything can be simplified, and it's helpful to make visual examples without styles when you're learning. I might make some more examples in the future if it gets a positive reception.