🔝
If you like this page, SHARE IT with your friends.
Modified : 15 Dec 2018

Accordion Script with jQuery - Simple and Easy to Use

Accordion Script to Hide / Show only one content

This Script will toggle only the HTML element below the Accordion Header. You are required to assign class to the Accordion Headers only. You may style the accordion header as per your site's look and feel. The script also changes Up / Down triangles according o the visibility of the accordion content.

Requirement : jQuery

Accordion Script

Demo

Accordion Header 1. Content visible on page load.

I am content of Accordion Header 1.
Accordion Header 2. Content hidden on page load.
I am content of Accordion Header 2. Accordion Header 3. Content visible on page load.

I am content of Accordion Header 3.



You can see working demo of the above script on this page.

Accordion Script to Hide / Show multiple content container elements on page

Requirement : jQuery

This Script will hide / show the content HTML element multiple Accordion Header. You are required to assign classes to the HTML element of Accordion Header and HTML element of content containers of all Accordion headers. You may style the accordion header as per your site's look and feel and show / hide content of one or more Accordion Headers on page load. The content of any one accordions will be visible at a time.

Demo

Accordion Header A. Content visible on page load.

I am content of Accordion Header A.
Accordion Header B. Content hidden on page load.
I am content of Accordion Header B.
Accordion Header C. Content hidden on page load.
I am content of Accordion Header C.


You can see working demo of the above script on this page.

Popular Content :