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. 

If you would like even more options, checkout this premium expand and collapse toggle tutorial for Elementor

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

137 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 when i click on button2 it disappears and appears -> 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!

      1. thank you! the sections are working fine, but I need some indicator like a cross icon on the buttons so that user know to click again to close the section. Please help!

  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 !

  28. Hi,

    Great tutorial. It is almost what I need, but I have a strange thing.

    I want to show a survey in the hidden section. The plugin to build them is Modal Survey from Pantherius.

    I have made a quiz with timed questions, so when the quiz start .. a user has 12 seconds to answer a question. Because there is not an option to make a start quiz button, i wanted to use your sollution.

    Now, when someone is clicking the button, the hidden section is opening.

    The quiz is starting...

    BUT... the first question of the quiz is without layout, and is looking like it is showing on a big mobile screen. The second question is showing okay with the right css.. so 3 answers in a row, and two rows.

    How can I get, the first question also showing with normal css. Now its showing, question, below question.. and not 3 in a row.

    Is it possible for example, when clicking the button, the section opens, and the content of the section gets reloaded/refreshed?

    When I can solve this issue, you have made my day.. since i am looking for a sollution the whole weekend allready.

    I hope you understand my question, since i cannot attach screenshots.

    1. ah, I notice something different. When section is hidden, the timer of the questions allready is started. So, when a user clicks the button, some questions allready passed..

      Is it possible to have the content started after pressing the button?

      1. Possible, yes probably. Quite complex though.. would require a lot of extra coding, specially for your use case and the plugin you are using.

  29. Hi, i have a question.

    I have two buttons, one at the top of my page and one in the middle. I want both buttons to show the same section. If I give the same CSS class to both of the buttons, only one button shows the section, the other button doesn't work. How can I fix this?

    Thanks in advance!

    Nico

    1. Nothing to fix, it's not broken.. that's how the code works!

      You could add another section, that one would show up upon clicking the other button.

      To have all clicktoshow buttons, open all showclick sections, use this code :

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

  30. Hello
    I was trying to make a More News Button
    You can see the Example Here " https://animallogic.com/animal-logic/news/ "
    The only problem is when I click on on the Button doesn't show up the Section I want meanwhile the button does disappear which I want.

    This is the Code I'm Using:

    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'));
    }); });
    }); });

    .clicktoshow{
    cursor: pointer;
    }
    .showclick{
    display: none;
    }

    ++++ I Have Checked the Classes no issue from there
    Please Have a look If you can fix it

    1. If you are using a JS dependant element in there, that's probably the problem. The Elementor Gallery Pro for example won't work directly...

  31. Hello,
    Thanks for the code. It works great 🙂
    I have a problem when using this in Elementor popup. It doesn't' work 🙁
    Any recommendation?

  32. Your code is great, but it seem to push my section off to the right, instead of centered on the page like it would normally be if always visible. No other styling is involved.
    Any thoughts?

    1. Hey Michael! Would you have the page URL for this? Is the content in that hidden section JS dependant? Like the gallery pro element, a slider, and a few others...

  33. This is brilliant - I've been trying to wrap my head around amending this code to show three buttons inline and each allows a section below (a vertical gallery) to show while hiding the other two (only in a mobile version)
    Have mostly got it to work but it's stacking the galleries that have been opened underneath the current selection. Here's the project - mikewalkerdesigns.com

    I shall try again to fix it today!

  34. Hello, i am facing a problem in hide or unhide the inner section. basically i am trying to create a 6 main section in in which all the section has 5 subsection (innersection), and in each subsection the actual content will show. so when i click on the main section its subsection will open and when i click on the subsection its content will open up.
    I am not using button for the main section it should open when i click on the main section and i will use the button in inner section to open its content. i am trying from 2-3 days but failed.
    Sorry for my bad english
    Please help me

  35. Just like
    2020
        Jan
              1st week
              2nd week
              3rd week
        Feb
             1st week
              2nd week
              3rd week
        Mar
             1st week
              2nd week
              3rd week
    2021
        Jan
              1st week
              2nd week
              3rd week
        Feb
             1st week
              2nd week
              3rd week
        Mar
             1st week
              2nd week
              3rd week
    2022
        Jan
              1st week
              2nd week
              3rd week
        Feb
             1st week
              2nd week
              3rd week
        Mar
             1st week
              2nd week
              3rd week

  36. Hey. Thank you for the awesome code and for replying to all these comments. Quick one please: I have three buttons for three sections and a fourth for all the sections. Everything is working perfectly apart from upon the page loading I would like all sections visible by default. Currently none are and you have to click one of the four buttons. Any ideas for the best solution? Thanks!

  37. Hey, if I wanted to change the behavior from display:none to toggling between visibility:visible / hidden, how would I approach this?

    The way it currently is works like a charm but when you put two toggles (or more) side by side , it creates problems with where what you want to display appears , because display:none entirely removes the object where visibility just hides/appears it.

    Thank you , I hope my question is comprehandable

    1. Hey!

      Here is the code for that :

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.clicktoshow').each(function(i){
      let toggled = false;
      $(this).click(function(){ 
      if (toggled){
      $('.showclick').eq(i).css('visibility','visible');
      toggled = false;
      } else {
      $('.showclick').eq(i).css('visibility','hidden');
      toggled = true;
      }
      }); });
      }); });
      </script>
      <style>
      .clicktoshow{
      cursor: pointer;
      }
      </style>
      
      1. You are a god , thank you for the quick reply.

        I altered the code slightly so the subject starts as hidden and then can be toggled if anyone wants to use it.

        document.addEventListener('DOMContentLoaded', function() {
        jQuery(function($){
        $('.clicktoshow').each(function(i){
        let toggled = false;
        $(this).click(function(){
        if (toggled){
        $('.showclick').eq(i).css('visibility','hidden');
        toggled = false;
        } else {
        $('.showclick').eq(i).css('visibility','visible');
        toggled = true;
        }
        }); });
        }); });

        .clicktoshow{
        cursor: pointer;
        }
        .showclick{
        visibility:hidden;
        }

  38. Hello,
    I have problem and i need help please,

    after clicking on a button and displaying a section I want the button to keep the hover style.

    Thank you.

    1. A bit complex and out of scope for the current tutorial... very specific too, so I don't think I will make a tutorial about that.

    1. Hey Constantine!

      It should be working just fine for an inner section. In fact this should work for any element at all!

      Cheers

  39. Hi 🙂 Very nice work you did here! I have another question... as I am just a graphic designer, not a Coder, who needs to build a Website, I would like to change the text of the button from "view more" (which opens the hidden section) to "view less" which closes the hidden section 🙂
    Would be great if you have a solution here 🙂
    Thanks a lot!!

  40. Hello Maxime, thanks so much for this, you're a lifesaver. Since I'm not a coder, I need help here. I'm using this with 4 buttons in 1 section, I was wondering if its possible to make it in a way that one remains open throughout. Not any specific one, but at the beginning, maybe the first, but consequently, the last clicked.

  41. Hi there,

    How would I do this, so that I have 3 columns in one section, with 3 icons each.
    each icon you can hover over, and display a column below in a separate 3 column section.

    So:
    -----section 1------
    [icon1][icon2][icon3]
    -----------------------
    -----section 2------
    [showhover1][showhover2][showhover3]
    -----------------------

    Basically, as it is now, when I hover over icon 1 2 or 3, they all only show 'showhover1' only and not the others...

    1. sorry to simplify better,
      how can I have multiple icons in one section, display individual columns in a single section below?

      I put the hovertoshow on each icon

      then put the showhover on each column I want

      but when I hover they all show.

      Do I need to number them(hovertoshow1. hovertoshow2, etc) ?
      Does adding numbers affect the script? or do I need to add anything ?

      not a coder, so I am sorry! thanks in advance

Leave a Reply