Tania Rascia Web Design and Development

Skip Navigation
Simple jQuery Examples with Code and Demos

Simple jQuery Examples with Code and Demos

By Tania Rascia  /  36 responses

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.


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…

See the Pen Accordion Styled by Tania (@taniarascia) on CodePen.

Style No Style

// Clicking on the accordion header title...
	$(".accordion").on("click", ".accordion-header", function() {
	// will (slide) toggle the related panel.


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.

See the Pen Tabs Styled by Tania (@taniarascia) on CodePen.

Style No Style

// Clicking on the tab...
$(".tab-list").on("click", ".tab", function(e) {
	// will remove all active classes from the tabs...
	// will hide all tab content...
	// and will activate the current tab and content.


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

See the Pen Dropdown Styled by Tania (@taniarascia) on CodePen.

Style No Style

// Clicking away from the dropdown will collapse it.
$("html").click(function() {

// Any nav item that is not an only child...
$("nav ul li a:not(:only-child)").click(function(e) {
	// will be toggled.

	// Opening a new dropdown will collapse any other dropdown.

Popup Modal

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.

See the Pen Modal Styled by Tania (@taniarascia) on CodePen.

Style No Style

// Clicking the open class will open the modal.
$(".open").on("click", function(){
  $(".overlay, .modal").addClass("active");

// Clicking the close class will close it.
$(".close, .overlay").on("click", function(){
   $(".overlay, .modal").removeClass("active");

// Pressing the escape key will also close the modal.
$(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.

See the Pen Scroll Styled by Tania (@taniarascia) on CodePen.

Style No Style

// Activates when you scroll.
$(window).on("scroll", function() {
	var position = $("#begin").offset();

	// If the top of the screen is greater than the #begin element.
	if ($(window).scrollTop() > position.top - 80) { // 80 pixels is the height of my navigation.
		// activate your class.
	} else {
		// otherwise remove it.


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

Smooth Scroll to an ID Simple Image Slider


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.

Email List

Get friendly updates, infrequently.

Tania Rascia

Hiya. I'm Tania, a web developer from Chicago. Hope you enjoyed my ad-free, bullshit-free site. If you liked it, tell someone about it!

 GitHub  Twitter

Write a response

Your email address will not be published.


  • Gary Garchar says:

    It looks like all of the examples on this page are codepen dependent. Can you show me a link to a single html page of any of the examples with the style css and jquery code embedded?

    • Tania says:

      They’re not “Codepen dependent”, they’re just on Codepen so you can see an example of them in action. View the source of the demo in Codepen if you want to see the full HTML.

  • Diptanu says:

    your contents are really helpful……thanks a lot Tania

  • mory says:

    very nice thanks you .

  • NISHA says:

    nice article

  • Miora says:

    Thanks a Loooot! simple and concise for beginning! cheers

  • ritik says:

    HI Tania, Your content is valuable for me.

  • Srikanth says:

    Your writings are so clear and involving. I am a newbie in this field. I am learning to code for the past two months. I had learned a bit of html and css. I find it difficult in learning javascript. The way you are explaining is so simple and interactive. Thank you. Keep posting.

  • eduardo nuñez says:

    hi tania,
    I’m looking for a searchScript wich scan text inside of the body from a html-document andjumps instantly there (like [strg]+[f] in sublime text), for make a very long onepage-html. don’t wanna make index and so & don’t wanna make an ordered structure ! just6 adding on timeflow new staff and then search for needed terms.
    do u have any hint(s) or allready script???
    with best regards

  • Nick says:

    Hi Tania

    I’m wondering about your Modal Window. If i downsize it to Mobile width i notice the modal window width becomes very very narrow.

    Any thoughts on the possibility on making the Modal window fluid/responsive in this case?

  • thoeurn sreymean says:

    thank you . can you show more example?

  • Suhni California says:

    really great – thanks

  • Waqar Ali says:

    Thanks Madam 🙂

  • Simon says:

    Hi Tania. Is jQuery something you can use within a wordpress site?

    • Tania says:

      Absolutely yes. jQuery is built into most WordPress themes, or you can add it into your own if you’re creating one from scratch.

  • Anonymous says:


  • Basma says:

    thank u for the informative article

  • Anonymous says:

    Really, this is good resource.

  • Richard Nash says:

    Is there a good resource for these examples in vanilla ES6 JavaScript? jQuery is chill, but I’d love to see the full versions of these with modern JS 🙂

    • Scott L says:

      Richard, although you’re looking for the “how to” guide written by somebody else, I can’t think of a better way to learn to do this with ES6 than to actually try it out yourself! Look at a resource such as http://youmightnotneedjquery.com/. Start with adding & removing classes with vanilla ES6.

  • Luke says:

    The thing I like so much about Your site, Tania is not only the fact that it contains almost everything I need to learn about web dev on my entry level but also Your talent to strip all knowledge down to essential facts which is not necessarily easy thing to do. It inspires to go deeper and learn more rather than discouraging with tons of complex details. Thanks a lot and keep up the good work! 🙂

  • Bogdan says:

    So handy and useful article! Couldn’t find anything like this neither on sitepoint, nor smashingmagazine nor css tricks. All necessary things in JUST ONE article!

  • Sergey says:

    Wow, Tania. The amount of times you already changed the design of the front page amazes me. 🙂
    Keep on the good work!

  • Adam Abrams says:

    Thanks Tania! I consider myself fairly along the road of web coding but mostly I’m modifying WordPress sites from the back end. I’m trying to get down to basics and learn how the cool stuff out there – heck, fairly standard stuff now! – is actually done so I can actually do it myself. These examples are great.

    My worry though with this is that there’s always some hidden “gotcha” or extra code required to make sure it works in all browsers, or fails gracefully, or some such. Is that an out-of-date worry? Could it really be this simple? 8^)

    Anyway, thanks again! And rock on with your accordion! (I’m a ukulele man myself… but definitely appreciate the ol’ squeezebox.)

    • Tania says:

      It really is that simple! jQuery is created to be as cross-browser compatible as possible. I didn’t mention the $(document).ready(); in these examples, that’s the only thing I would be sure to add.

  • Pedro Vagner says:

    I just type up up down… in your about page. That’s so funny. What is your SNES game inspiration for this secret code? I do not want to search the internet, I’d rather hear from you.

  • Bogdan says:

    Thanx! clean and simple

  • Apple says:

    Thanks for sharing!

  • Joaquín says:

    great examples!

  • Ted says:

    Good run through. Very helpful for someone who is just getting the hang of JQuery. Thanks for sharing!