Home ❯ Misc. ❯ Show Hide Button

Show Hide Button / Toggle Switch with only CSS

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.

Button to toggle content hidden on page load

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

Button to toggle content visible on page load

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

Button without Up / Down Triangles

Button to toggle content hidden on page load

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

Button to toggle content visible on page load

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

CSS Code for above buttons / Toggle switches

//-- CSS for input and label
[ type=checkbox]{display:none}
label{background:#ddd;padding:5px 10px;border:1px outset #fff;margin-top:10px;width:auto;display:inline-block}label:hover{background:#eee}

//-- CSS for Buttons with Up / Down Triangles 
.cv+label+*{display:block}.cv+label::after{content:" \25b2";float:right} .cv:checked +label+*{display:none}.cv:checked + label::after{content:" \25bc";float:right} 
.ch+label+*{display:none} .ch+label::after{content:" \25bc";float:right} .ch:checked +label+*{display:block}.ch:checked + label::after{content:" \25b2";float:right}

//-- CSS for Buttons without Up / Down Triangles 
.cv1+label+*{display:block} .cv1:checked +label+*{display:none}
.ch1+label+*{display:none} .ch1:checked +label+*{display:block}

//-- Impotant : The Content DIV or other HTML element whose content is to be toggled must be next to the closing HTML tag for label element i.e. </label>.

//-- HTML of above CSS Buttons

<h3>Button with Up / Down Triangles</h3>
<p>You may replace Up / Down triangles with any other text in the CSS code.</p>
<input type=checkbox class=cv id=a1><label for=a1>Button to toggle content hidden on page load  </label>
<div >I am <div> with content hidden on page load.</div><br><br>

<input type=checkbox class=ch id=a2><label for=a2>Button to toggle content visible on page load  </label>
<div>I am <div> with content visible on page load.</div><br><br>

<h3>Button without Up / Down Triangles</h3>
<input type=checkbox class=cv1 id=a3><label for=a3>Button to toggle content hidden on page load</label>
<div>I am <div> with content hidden on page load.</div><br><br>

<input type=checkbox class=ch1 id=a4><label for=a4>Button to toggle content visible on page load</label>
<div>I am <div> with content visible on page load.</div><br><br>

Updated : Apr 07, 2021

Sitemap Privacy Contact