How to apply accordions using jQuery

What is an accordion?

Accordions are contents of a website that are arranged in a list manner which can be toggled from being hidden or visible.

In jQuery, we use the accordion method on a wrapping div to achieve this.

Example

Explanation

• Lines 7–10: We link our jQuery CSS and JavaScript libraries.
• Lines 12–14: We select the div using its ID that wraps the accordion, and we call the jQuery accordion().
• Line 19: We create the wrapping div and give it an ID of accord.
• Line 20: We use a header <h3> to start the first accordion under which we use a div to wrap a p tag containing the content of the accordion.
• Line 20: We repeat the same for Accord2 and Accord3.