How To Create a slideToggle Element In WordPress

A simple and great way to hide content, though still keeping it accessible for your site’s users is to hide content behind a slideToggle. A few real-life examples where we have used it are hiding an extra nav behind a button or just a piece of text.

But let’s get started and see how to create a simple jQuery slideToggle element that you can use in your WordPress site. This code should work with most WordPress builds as long as you have not disabled jQuery and works with Elementor too.

Requirements

As mentioned earlier on to use slideToggle you are going to need the jQuery library. This should be enabled in your WordPress site natively unless removed, though if it happens you don’t have jQuery installed you can get it from here.

Creating a button and element to hide

To get started with slideToggle we are first going to create a button. This can be easily created as a Gutenberg or Elementor button or as an HTML element. The most important part is to give the element a class or an ID.

For this example, we have created a button with the ID “toggler” which simply acts as our identifier to call in the jQuery code we are going to create next.

<button id="toggler">Click me</button>

Next, let’s create an HTML element we want to hide, for example, it could be a piece of text.

<p class="hiddenText" style="display:none;">I am a hidden text that can be revealed with the slideToggle.</p>

Notice we have added the style “display: none;” to the text to hide it and a class “hiddenText”. Hiding the text element could also be done with your style.css but for now, we are doing it with a piece of inline CSS.

Now we have a button to reveal the element we want and the text we want to reveal. Next, we are going to create the code to reveal and hide the text on click.

Creating the jQuery slideToggle code

There are two parts in this code which are capturing the click event, meaning capturing when the button is clicked and the toggle that changes the text from hidden to revealed or vice versa on each click.

Here is the simple code you can grab and add directly to your page. If you are using Elementor simply add the code to an HTML element. With Gutenberg, you can do the same.

<script>
jQuery( document ).ready(function() {
   jQuery( "#toggler" ).click(function() {
     jQuery( ".hiddenText" ).slideToggle();  
   });
});
</script>

Here’s how our code looks when it’s live on the site:



Conclusion

Here is the full code so you can copy-paste it to your site and test it for yourself.

<div style="text-align: center;">
<button id="toggler">Click me</button>
<br/>
<br/>
<p class="hiddenText" style="display:none;">I am a hidden text that can be revealed with the slideToggle.</p>
</div>
<script>
jQuery( document ).ready(function() {
   jQuery( "#toggler" ).click(function() {
     jQuery( ".hiddenText" ).slideToggle();  
   });
});
</script>

Comment below what you would like us to teach next and if you liked our short tutorial regarding slideToggle in WordPress.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *