Project 11: Accordion in jQuery

jQuery Accordion: Click & Reveal!

Want collapsible sections that open and close with clicks? Here’s a basic jQuery accordion:

1. HTML Structure:

  • Wrap your content sections in a container with a class (e.g., .accordion).
  • Each content section should have a heading (e.g., <h3>) and content (<div>).

jQuery Code:

JavaScript
$(document).ready(function() {

$(“.accordion h3”).click(function() {

$(this).next().slideToggle();

});

});

  1. Use code with caution.
    content_copy
  • This code targets all <h3> elements within the .accordion
  • Clicking an <h3> triggers slideToggle() on the following element (the content).

Output

Result: Clicking an accordion header smoothly toggles the content section open or closed.

Search

PHP Projects

School Projects

Collage Projects

Join Us

Follow Us

Recent Blogs