1. Home
  2. Banking
  3. Tax
  4. Forms
  5. ppf - ssy
  6. Sr. Citizen
  7. Widgets
  8. Misc.
  1. Home ➤ 
  2. Misc. ➤ 
  3. You Are Here

AMP Show Hide Button / Toggle Switch

We give below codes for creating Show Hide Toggle Buttons for AMP ( Accelerated Mobile Page ) to Show and Hide Menu and to Show and Hide multiple content items on same AMP Page. The code uses only 'AMP Bind script and CSS' only. No images are used for creating the switches. The code may be freely used / amended for creating nice looking switches on valid AMP pages.

1. Show Hide Button / Toggle Switch by using only CSS

As the code for these Show Hide Button / Toggle Switches use only CSS (no Javascript), 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.

Button with Up / Down Triangles

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

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


I am <div> with content visible 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 for the above buttons / Toggle switches

The AMP buttons / switches shown below work only on AMP pages. These buttons / switches do not work on Non-AMP pages. You can see the working demo of these buttons / switches by visiting the valid AMP version of this page.

2. AMP Show Hide Toggle Switch / button without changing button Text with AMP Custom Script

Button to toggle the content of <div> element hidden on page load.

This code enable you to create as many 'Show Hide Buttons' on AMP pages as you like with minimal code. Please note that the buttons with this code will work only on AMP pages. The CSS and other code for the 'Show Hide Button for Page Content' is as given below:

I am <div> with class "div1". My content was hidden on page load.


Button to toggle the content of <div> visible on page load.

I am <div> with class "div2". My content is visible on page load.

Code for the above buttons / Toggle switches

3. AMP Show Hide Buttons with changing button text on same page with AMP Custom Script

This code enable you to create as many 'Show Hide Buttons' on AMP pages as you like with minimal code. Please note that the buttons with this code will work only on AMP pages. The CSS and other code for the 'Show Hide Button for Page Content' is as given below:

I am <div> with class "div3". My content is visible on page load.


I am <div> with class "div4". My content is visible on page load.


I am <div> with class "div5". My content is visible on page load.


I am <div> with class "div6". My content is visible on page load.
Updated : Oct 25, 2020
You may like to View / Use / Download
Income Tax Calculator AY 2021-22 Income Tax Slabs / Rates AY 2021-22
Advance Tax Calculator AY 2021-22 Interest u/s 234A B C Calculator
TDS Calculator AY 2021-22 TDS Rates AY 2021-22
Tax Saving Calculator Post Office Small Saving Calculators
PPF Calculator 2020 SSY Calculator 2020
Challan 280 in fillable Excel and PDF TDS form 16 in Excel with Calculation formulas
PAN forms and Annexures in fillable PDF Post Office forms in Fillable PDF
SBI Lending Rates for Perquisite Valuation Ramayana Prashnvali