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:

$(document).ready(function() {

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




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


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


PHP Projects

School Projects

Collage Projects

Join Us

Follow Us

Recent Blogs