1. Home
  2. Tax
  3. Forms
  4. Finance
  5. PPF
  6. SSY
  7. Widgets
  8. Misc.
Home  ❯  Misc.  ❯  Accordion Scripts / Code

Accordion Scripts / Code

AMP Show Hide Button / Toggle Switch

CSS Accordion (No JavaScript) : Works both on AMP and Non-AMP pages

These accordions require only CSS for functioning and work both on AMP and non-AMP pages without any JavaScript or AMP script. Each accordion is independent of other accordions on the page and you are required to give a unique id to each accordion.

Demo of CSS Accordion

I am content of Accordion 1.




I am content of Accordion 2.





I am content of Accordion 4.I am content of Accordion 4.
I am content of Accordion 4.I am content of Accordion 4.
I am content of Accordion 4.I am content of Accordion 4.
I am content of Accordion 4.I am content of Accordion 4.




I am content of Accordion 4.





Accordion Code

Accordion Type B : Requirement CSS and JQuery

Demo of Accordion Type B

Accordion 1 (Content visible on page load)

I am content of Accordion 1. I was visible on page load.

Accordion 2 (Content hidden on page load)

I am content of Accordion 2. I was hidden on page load.

Accordion 3 (Content visible on page load)

I am content of Accordion 3.

Accordion Code

Accordion Type C : Requirement CSS and JQuery

Demo of Accordion Type C

Accordion 1 (Content visible on page load)

I am content of Accordion 1.

Accordion 2 (Content hidden on page load)

I am content of Accordion 2.

Accordion 3 (Content visible on page load)

I am content of Accordion 3.




Updated : Oct 20, 2020