Create a section that shows up only on button or icon click

No extra plug-ins required! Elementor Free Compatible.

Here is the new section!

templates

To begin with, give the section that you want to appear a CSS class of ' showclick '

Give it the class ‘ showhover ‘ instead if you want it to show up upon hovering.

Elementor: Create a Section That Shows Up Only on Button Click​

Now, create a button or an icon, and give it the class ' clicktoshow ' or ' hovertoshow '

Elementor: Create a Section That Shows Up Only on Button Click​

If you use a button, empty the link field. (Hover this icon to see the picture)

Elementor: Create a Section That Shows Up Only on Button Click​

Finally, add this code in an html element on the same page

This is the code to show the Elementor Section on click.

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.clicktoshow').each(function(i){
$(this).click(function(){ $('.showclick').eq(i).show();
$('.clicktoshow').eq(i).hide();
}); });
}); });
</script>
<style>
.clicktoshow{
cursor: pointer;
}
.showclick{
display: none;
}
</style>

This is the code to show the Elementor Section on hover.

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hovertoshow').each(function(j){
$(this).hover(
function(){
$('.showhover').eq(j).show();
} ,
function(){
$('.showhover').eq(j).hide();
});
}); }); });
</script>
<style>
.showhover{
display: none;
}
</style>

Keep in mind that the sections won’t be accessible from within the editor. Just change the CSS that is in the html element a little bit when you want to edit them, and they will show back up.

Change ‘display:none’ to ‘display:block’ for showclick and showhover when you will want to edit these sections.

Important: This code will work for as many ‘.showclick’ and ‘.clicktoshow’ instances are present on your page.

It will automatically link the first element with the class ‘.showclick’, with the first element that has the class ‘.clicktoshow’, and so on.

Same goes for the hover version. 


This download gets you the following template :

Elementor Show Section On Click Template

Related tutorial : Elementor Show Section On Click

Name your price $

Et voila! Thanks for reading!
Let me know if you need help!

101 Responses

  1. Thanks so much for this! It was just what I needed to create a custom mega menu! Grazie!! Also, don't know if you can help but I need the hidden section to stay open and it disappears so I can't get to any of it. Any tips? Spasibo!!

  2. Hi Maxime,

    Thanks a lot for this nifty trick. I've used it to create three buttons which each show a different section on click.

    I had to play around a little but it allowed me to show-hide sections on button click, actually having a toggle effect and allowing me to use the content of each section.

    I found that your code actually hides the button you click, so I removed the $('.clicktoshow').hide(); part.

    1. @Erwin van der Beek can you kindly share the code with me?
      I am trying to implement 2 button layout that open different sections on click and also keeps the buttons from hiding

      Thanks @Maxime Desrosiers for all that you do, really appreciate this

  3. When adding this to a form field (like an email input for a newsletter subscription), this also hides the form field when clicked. Is there a way to make this only relevant to the 'Submit' button?

    1. Hello Daniel! Yes, this is possible... you will have to find out the right selector on your submit button though. Right click on it > Inspect , find the class name, then modify this part

      $('.clicktoshow').click(function(){

      with your class name , ie:

      $('.submitbutton').click(function(){

  4. Hello Leonie! I just re wrote the code to allow for this. I also updated the instructions a little bit, towards the end of the article! Let me know if this works for you!

    1. Hello Leonie! I just re wrote the code to allow for this. I also updated the instructions a little bit, towards the end of the article! Let me know if this works for you!

  5. This is exactly what I was looking for. Thank you!

    In my instance it is opening up a "request an appointment" form that I don't want up all the time. Anyway to make the button change to say "close form" and then it closes that section when clicked? Not a dealbreaker, just once it is opened, it is open for good.

  6. can i use this code to show and hide two tabs?
    Button1 Button2
    Content 1 <- it appears when i click on button1 but button2 disappears and -> Content 2.

  7. Hi! Thank you so much for this code. I'm so glad I didn't have to purchase a plugin. Do you have a "Buy me a Coffee" link or a donate link?

  8. Amazing! The only thing which bothers me is an white bar in between sections since i implemented this 🙁 im using the click one on a form widget.

  9. Hi! How can I use this code with two different buttons. I want it to hide both buttons but show different content when a button is selected.

    For instance... I'm asking how an experience was. For one button I want to show one form and for another button I want to show a completely different form.

    1. Hey Darion! Have two buttons with the class 'clicktoshow' . Then, have two sections with the class 'showclick', each with their own form in them. Clicking button one will make the 'showclick' section one show up.

      To hide both buttons on click of anyone of them, change this part of the code :

      $('.clicktoshow').eq(i).hide();

      to this

      $('.clicktoshow').hide();

  10. Is it possible to make the whole section disappear after the "clicktoshow" button is pressed? Meaning the section where the button was initially in.

    In addition can you place an edit button in the place of that section that disappeared if the person wants to go back and choose something else?

    1. All possible, but beyond the scope of the article. That would need to be custom coded... You can send me a message if you want custom work.

  11. Hello! This has been working flawlessly for me (thank you!) except all of a sudden, when I click the 'clicktoshow' element, it jumps to the top of page. The 'showclick' element appears, but the user would have to scroll all the way back down to the end of the page to see the revealed content.

    FYI I have *not* yet upgraded to Elementor 3.xx yet.

    Any advice? Thanks very much.

    1. You probably have something in your button 'link' field. Remove it! I talk about this in the article, just before the 'Finally....' part.

  12. Thank you so much for this amazing tutorial, it works fine, but for some reason it takes you to the top of the page when you click on the button, why that?

  13. Hi, this worked great on my page. I used it for several buttons/sections and labeled each one to make it easier to keep track. (Ex: clicktoshow-puppy and showclick-puppy).

    Is there a way I can also make other sections close when the button is clicked?

    1. Glad to read that!

      Yes there is a way. Below the code line

      $('.clicktoshow').eq(i).hide();

      add

      $('.sectiontohide').hide();

      And give that class name to the section you want to close.

  14. Thanks! It works great just that everytime I click the button it takes me to the top of the page - how can I make it show the section and stay on it?

  15. Thank you for this tutorial! However, how can I show other sections simutaneously? Just name the section to same '.showclick' doesn't work. Thanks again for your help!

    1. Use this code!

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.clicktoshow').click(function(){
      $('.showclick').show();
      $('.clicktoshow').hide();
      });
      }); });
      </script>
      <style>
      .clicktoshow{
      cursor: pointer;
      }
      .showclick{
      display: none;
      }
      </style>

  16. For me, weirdly on clicking the button, the page scrolls all the way to the top with a #top in URL. Is there any solution to this? clicktoshow works fine. The only problem is that the page will scroll to the top.

  17. I've tested the hover version. There's a big problem. It works, the element will be shown and hidden on mouse over, but on load page the showonhover element is visible. Damn 🙁

  18. Thank you! This is exactly what I need except I have an image carousel in the section I'm hiding and the code screws up the carousel, it only reveals one of the images in the carousel's gallery. Any ideas on how to fix?

    1. Use this code instead!

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.clicktoshow').each(function(i){
      $(this).click(function(){ $('.showclick').eq(i).show();
      $('.clicktoshow').eq(i).hide();
      window.dispatchEvent(new Event('resize'));
      }); });
      }); });
      </script>
      <style>
      .clicktoshow{
      cursor: pointer;
      }
      .showclick{
      display: none;
      }
      </style>

      1. While I was optimizing a website's speed, a page with Google Maps was creating real problems for the score. So I used your code to hide the map in a section and web requests went down from 90 to 35 increasing the page score. However, upon pressing the show button the map display was all messed up and not showing correctly, but using the above code helped resolve the problem. Thank You, Maxime!

    2. Maxime Desrosiers Wow, really didn't expect an answer this fast especially on Christmas. Thanks so much this worked perfectly. Lastly, is there something I can add to the code so that if I have multiple clicktoshow elements on the page the revealed sections are hidden when another element is clicked? http://tierag.sg-host.com/portfolio Here is my draft page, if I click the first headhsot to reveal the info below it, i'd like for that info to be hidden when the next headshot is clicked.

    3. If there's no way to do what i asked above, wondering if there's a way to use an anchor link or something so when the button is clicked the page jumps to the section that is revealed?

    4. Tiera Harris Gray Try with this code then :

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.clicktoshow').each(function(i){
      $(this).click(function(){
      $('.showclick').hide();
      $('.showclick').eq(i).show();
      $('.clicktoshow').eq(i).hide();
      window.dispatchEvent(new Event('resize'));
      }); });
      }); });
      </script>
      <style>
      .clicktoshow{
      cursor: pointer;
      }
      .showclick{
      display: none;
      }
      </style>

    1. As I wrote in the article towards the end : Important: This code will work for as many '.showclick' and '.clicktoshow' instances are present on your page.

      It will automatically link the first element with the class '.showclick', with the first element that has the class '.clicktoshow', and so on.

  19. Thank you! That's great. When trying to use this code for elements that are placed in a popup, it doesn't work. It does when previewing the popup from the Elementor editor, but not on the website itself. Do you have an idea why and how to fix it? ????

    1. I figured it out!
      Changed the first line of the code from:
      document.addEventListener('DOMContentLoaded', function() {

      to:
      jQuery( document ).on( 'elementor/popup/show', () => {

    1. Steve Andrew Yes, find the right selector for that button, then place it in the code...

      However this will show the new section on any click of that button, even if the form isn't filled properly. There will be no validation checke before showing the section.

  20. Hey! This is really great but what do I have to do if I want the section " clicktoshow" to stay and the page and don't dissapear when I click on it? Thanks a lot

  21. It works for me to an extent. When it shows the section, it doesn't show the whole thing. It only shows the top part of the section. The rest of the section is hidden.
    I am using showclick on the section. I have tried on the actual html widget, but it does the same thing. Is there a height setting that would need to be adjusted?

    1. It should be working fine.... Maybe it is because of the kind of content you have in that section. Let me know what you have in there...

  22. This is working really well! Other than the fact the button disappears when it is clicked. Is there anyway that I can get the button to remain, and maybe change to show that it has been clicked, then if you unclick it the section disappears? I have 4 columns that I want to be able to show a section underneath when clicked, but if the customer changes their mind I want them be able to click another option? Not sure if that makes

  23. Thanks a lot ! I use your code with a few adjustments for displaying different contents on the same page ! Like, two buttons to show different images, one button the the first picture, the second for the other one. ^^
    Very very usefull !
    Thanks again 😀

  24. I built upon your code so that way when you activate .clicktoshow2 it will display the contents of .showclick2 and at the same time hide .showclick0, .showclick1, and .showclick3. This way it is kind of like using tabs but the .clicktoshowX can be used on any element and is not required to look like a "tab". I have a .showclick0 that displays on the site like normal with text to tell users to click on .clicktoshowX objects. That way once you click on any .clicktoshowX object it will remove .showclick0 content as now the user knows how to use the clickable elements.

    I'll be using this for one of my clients so a user can click on an image hotspot and display content about that hotspot. So basically on a body silhouette you can click an elbow and it will display an info section about the elbow below the image.

    Is there by chance a smaller amount of code to achieve this same goal? I'll have about 10 hotspots, if not, as long as this works I'm good with it. I just want to make sure the code looks "up to code".

    Edit: I forgot to say THANK YOU!!!

    <script>
    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
    $('.clicktoshow1').each(function(i){
    $(this).click(function(){ $('.showclick1').eq(i).show();
    $('.showclick0,.showclick2,.showclick3').eq(i).hide();
    $('.showclick0,.showclick2,.showclick3').hide();
    }); });
    }); });
    </script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
    $('.clicktoshow2').each(function(i){
    $(this).click(function(){ $('.showclick2').eq(i).show();
    $('.showclick0,.showclick1,.showclick3').eq(i).hide();
    $('.showclick0,.showclick1,.showclick3').hide();
    }); });
    }); });
    </script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
    $('.clicktoshow3').each(function(i){
    $(this).click(function(){ $('.showclick3').eq(i).show();
    $('.showclick0,.showclick1,.showclick2').eq(i).hide();
    $('.showclick0,.showclick1,.showclick2').hide();
    }); });
    }); });
    </script>
    <style>
    .clicktoshow1{
    cursor: pointer;
    }
    .showclick1{
    display: none;
    }
    .clicktoshow2{
    cursor: pointer;
    }
    .showclick2{
    display: none;
    }
    .clicktoshow3{
    cursor: pointer;
    }
    .showclick3{
    display: none;
    }
    </style>

    1. Hey Michael! Yes as I was reading your description I was thinking exactly that... the code was going to be a mess! Then I saw that you posted it and indeed it is.

      It's possible to simplify it greatly, however it does go beyond the scope and intent of the current article. I like to keep things simple and easy. With this kind of design particularly, many different variations can be thought of, and I could not code them all

    2. Maxime Desrosiers here is a peak at my creation in progress: https://bjj.leadnerds.io/

      I decided to just do 9 scripts as it is easy to uderstand and to edit for anyone, but I did combine the styles like this:

      .clicktoshow1,.clicktoshow2,.clicktoshow3{
      cursor: pointer;
      }
      .showclick1,.showclick2,.showclick3{
      display: none;
      }

  25. How can I create a close button for the section? I am able to close the section using the same button that I click to open, but I'd like to include a separate button to close the section within the actual section itself. Thanks!

    1. Maxime Desrosiers Thanks but that one isn't working for me because it only opens the section directly below and I have three sections I want to open for three buttons that are in a row (not as inner sections)

    2. Kimberly Jachimek Got ya. In that case, use this modified version I just coded for you below. Give the close buttons the class names 'clicktohide' , and place them in the hidden sections!

  26. Thank you so much! Any idea how I could turn off this effect for mobile devices? (In Elementor, if I set these sections to 'hide on mobile', they still show when clicked instead of hiding.)

      1. Just tried it: Works great if I haven't clicked the trigger button. But, if I click the trigger button and then resize the browser (from desktop to mobile) the section doesn't disappear. I tried clicking the 'hide on mobile' option for the section, but this didn't work. Any ideas? Thanks!

      2. Actually, just figured it out. Had to use !important in the custom CSS, but it does the job:

        @media (max-width: 767px) {
        .showclick {
        display: none !important;
        }}

        Thanks again! This was incredibly useful.

  27. Aloha Maxime, Thank You So Much for code.

    PLEASE; can you help me to let me know how can i save the user click on usermeta, and with this, the same user NEVER can click againg the same button?

    Thanks againg in advance
    By the way, i use onready your code with mouse over to show and hide. THANKS !

Leave a Reply