Toggle Button WP Shortcode without JS – Part 1

CSS Toggle WP Shortcode

In this tutorial, we look at some toggle button without any use of Javascript. We’ll be using pure CSS to create some toggle content switch that you can use for displaying FAQ, toggle some content, features, anything you want. We will also integrate this toggle button in a simple WordPress Shortcode in the next part of this tutorial so we can use it any time we want. You can view a live example on my contact page or by clicking the button bellow. So le’ts build our awesome toggle button.
Live Demo

The foundation for our Toggle Button

We’ve seen this kind of HTML before so there is nothing fancy here. It’s a standard checkbox input with a  label. Each of these label/input combinations are wrapped inside a div. In this example we will use the class of .toggle, so nothing major here but with the help of our checkbox we will hide or show our toggle content. We will also spice it up with FontAwesome to make it look even more awesome yet clean. Look at the HTML bellow:

<div class="toggle">
<input id="toggle-1" type="checkbox" checked="">
<label class="toggler" for="toggle-1">
<span><i class="fa fa-send"></i>Our awesome toggle title</span>
</label>
<div class="toggle-content">
<p>Some content</p>
</div>
</div>

Basic Toggle Button CSS Example

The label will act as our toggle button for the content and will be the container for button title and maybe a FontAwesome icon if you want. We added a light background, some transitions and with the help of :after selector we added our button switch, in our case again a FontAwesome icon – arrow right and arrow down when the input is checked. We changed the background on hover and when checked. You can use any FontAwesome icon like plus, arrow, checked, you choose.  For our label we also added a little left border that will change it’s color when checked to match the background of the label. You can add some border-radius if you want or you can change the position of the border, but i like it on the left.

.toggle > label {
background:#f4f4f4;
transition: all 0.3s ease-in-out;
border-left: 5px solid #EBE9EB;
display:block;
color:#08c;
position:relative;
margin:0;
padding-right:10%;
font-size:1.56rem;
font-family:"Open Sans", Arial, sans-serif;
font-weight:200;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.toggle > label:hover {
background:#08c;
color:white;
}
.toggle > label:after {
font-family: FontAwesome;
content: "\f054";
position:absolute;
right:3%;top:30%;
line-height:1;
font-size:14px;
}
.toggle > label i {
width:2.2rem;
padding-left:4px;
padding-right:4px;
}
.toggle > input:checked ~ label {
background:#08c;
color:white;
border-color:#08c
}
.toggle > input:checked ~ label:after {
content: "\f078";
}

 

Now that we have our toggle button we need one more thing – to hide the content when input is not checked and to show it when is checked.  We will not use display:none; because the transitions will not work if we do that, instead we will use max-height to set the max-height of the content to 0 when our toggle button is not checked and we give a max-height of however we want. It this little trick we make our reveal simple animation for our toggle. We use a ease-out transition when not checked and we switch to ease-in when checked. Dont forget to hide the overflow of the .toggle-content otherwise the text will appear before the animation will be complete and we dont want this. This is the complete code for our content that we want to reaveal on input checked.

 

Finished Toggle Button 

toggle button jquery show hide

Toggle Button

This is it, we’ve finished our CSS Only Toggle Button that we can use to toggle any type of content. Click this link if you want to see more live examples and inspiration of this tutorial or to check finished code or download tutorial files. Also in the next part of this tutorial we will integrate this toggle button in a WordPress shortcode like i have on my contact page. Feel free to comment bellow if you have any suggestions on how to improve this simple toggle button without use of jQuery. Stay safe and see you in the next part of this tutorial.