1. Home
  2. Banking
  3. Tax
  4. Forms
  5. ppf - ssy
  6. Sr. Citizen
  7. Widgets
  8. Misc.
Home  ❯  Misc.  ❯  This Page

Show Hide Button / Toggle Switch with only CSS

Get Accordion Scripts / Code

The code for these Show Hide Button / Toggle Switches use only CSS (no JavaScript). Therefore, these buttons work both on AMP and Non-AMP pages. The code also works for Accordions on both AMP and Non- AMP pages by giving unique Id to each input type checkbox element on a page. The main requirement for this code to work is that the 'DIV' or any other HTML element whose content is to be toggled (shown/hidden) must be placed next to the '</label>' tag.

Button with Up / Down Triangles

You may replace Up / Down triangles with any other text in the CSS code.

I am <div> with content visible on page load.


I am <div> with content hidden on page load.


Button without Up / Down Triangles

I am <div> with content hidden on page load.


I am <div> with content visible on page load.


CSS Code for above buttons / Toggle switches

Updated : Apr 07, 2021