How to hide and show Elementor sections with a simple button

In this tutorial, you're going to learn how to hide and show Elementor sections with the click of a button. The best part of all is that it is super easy and doesn't require extra plugins
Share on facebook
Share on linkedin
Share on pinterest
Share on reddit

Ok, so this will be a sort of part 1 of 2 from a tutorial based on a couple of features I implemented on one of my client projects that will help you immensely for when you’re building either your own website or in case you’re building websites for clients. This tutorial will be all about creating a section that’s hidden by default but that it can be shown with a simple click of a button.

 

When designing and building a website, you may find yourself in a case where you have too much content in one particular section that’s both vital to the overall concept of the site but that it also takes too much space when the website is taken live. For instance, in the case of my project, my client wanted to build a magazine site where the magazine issues would be a custom post type. In the template for said CPT, a table of contents would be placed below the banner to let the visitors know the articles that would be a part of the issue.

 

However, this table of contents wouldn’t be laid out like your regular table with all the text there. Instead, the visitors would see the featured articles of the issue in a three column setup with the rest of the articles hidden and a button to the side with the text “See all articles” that would then expand the section. Upon click, the text of the button would change to “See less articles” to collapse the section again to the three featured issues.

 

The default layout would be something like this:

 

 

After the button is clicked, it would look like this:

 

 

 

Pretty cool, huh? Now, if you’re wondering what can be hidden and shown with this method, the answer is everything! In this particular example, the rest of the featured articles were added in using an inner section widget and the repeater widget from JetEngine, but since you’re applying this to entire sections, nothing is off limits.

 

I’m also making note of this, because there is a plugin from Crocoblock called “JetTricks”, that install a bunch of Elementor widgets, one of them being the “Read More”. It does kind of the same, but not entirely, because this widget only shows a section that’s hidden, it doesn’t work to toggle sections, that is, hide and show them on click. Plus, you would be adding another plugin to your website which is just only going to affect your performance negatively.

 

Recommended reading: Amazing Elementor Sliders: How to make them

 

Having said all of this, let’s move on to the tutorial:

 

Step 1: Setting up your sections

For your first step, all you have to do is insert the section where the button is going to be and then the section where all the content is going to be hidden. I’ve created a two column section in my site; one on the left with two inner sections and a bunch of widgets within them. To the second inner section, you have to add an ID on the advanced tab. This ID will be used later on the button’s code which will trigger the toggle of the section hidden.

 

 

 

Step 2: Hiding the section

Ok, so on the inner section you just added the ID, click on the “Responsive” tab and turn the switch for all devices. We’re doing this to have the section hidden by default and for the button to have something to show once it’s clicked.

 

 

 

 

Step 3: Adding the button

Now and as a final step, you’re going to insert the HTML widget and add this code:

<button class="hide-show-btn" style="display: block; margin: 0 auto">
See all articles
</button>

<script>
jQuery(".hide-show-btn").click(function(event) {
event.preventDefault(); 
var lable = jQuery(".hide-show-btn").text().trim();

if(lable == "See all articles") {
jQuery(".hide-show-btn").text("Show less articles");
jQuery("#more-items").show();
}
else {
jQuery(".hide-show-btn").text("See all articles");
jQuery("#more-items").hide();
}
});
</script>

 

 

 

 

This code will generate the button and the whole feature of hiding and showing sections. With this code we can also get a little playful. Here is a couple of things you can do:

  • If you want to change the text of the button, all you have to do is edit everything between the <button></button> tags.
  • If, for some reason, your section has a different CSS ID, you can and have to change it on the jQuery
  • If you want to show a different text on the button when the hidden section is shown, you have to look on the jQuery for the part after “.text(“Show less articles”);”

 

Final Words

That’s pretty much it. Having a button like this allows you to easily hide and show Elementor sections to organize your content in a better way. Try it out and let me know what you think in the comments!

Join the templace newsletter

Every week, you will be receiving the greatest tips, design inspiration and all the goodies related to Elementor.

Previous and next POSTS

Do you want powerful hosting?

Kinsta’s hosting solution will give you an incredible loading time, bar none. With their amazing server infrastructure, attentive customer support and just great user experience all-around, hosting your website with Kinsta will be a delight.

  • Blog
  • Project Application
  • Agency Plans
Want to learn about Elementor, web hosting, page speed optimization or web design? Click the button below to view all the articles!
Are you looking to build a new website for your business? One that will stand out amongst the competition? Click the button and start your project now!
Are you an agency owner overworked with web design clients? No need to worry about that anymore! Take a look at my agency plans for website design & development.
backgroundLayer 1

Home

The right clients, at the right price, anytime you want.

About

It takes 3 things for a program to create life-changing results.

Team

We have the skills you need to build a multi-million dollar business.

Contact

Helping coaches & thought-leaders all over the world.

You could use this for a mission statement or something else about your business that could really help people know more.

Navigation Menu

Newsletter (this is pretty important here!!)

Sign up to our newsletter

This guide is included in all template purchases, but you can get it here if that's what you only want