Get Premium

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

No extra plug-ins required! Elementor Free Compatible.

View section

Here is the new section!

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

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​ 2

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​ 3

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​ 4

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

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

<script> 
/* Please login to get the code 
 * The code will be for the Elementor: Create a Section That Shows Up Only on Button Click​ tutorial 
 * Found at this URL https://element.how/elementor-show-section-on-click/ 
 */ 
</script>

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

<script> 
/* Please login to get the code 
 * The code will be for the Elementor: Create a Section That Shows Up Only on Button Click​ tutorial 
 * Found at this URL https://element.how/elementor-show-section-on-click/ 
 */ 
</script>

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!

Tagged

185 Responses

    1. Hey Livoirien!

      No this is not possible. The images within the hidden section will be lazy loaded, only when the section is shown.

      However loading the HTML of the section only after clicking isn't possible here. It would not be particularly good UX as it would first need to load from the server.

  2. I have changed the code to toggle between two sections, each with a shown or hidden carousel. I'm using two other similar sections with carousels as buttons which also toggle. The showing and hiding of the sections works fine, i.e. I see just one section acting as a button and one as a carousel and can toggle them, so the section that was a button is now the displaying carousel and vice versa. But, the 'window.dispatchEvent(new Event('resize'));' code to make it work for carousels so that they auto-play only works once for the first toggle. After that, the only way to make the carousel play is to resize the page manually. I would appreciate any help.

  3. Hi Maxime, Thanks for the reply. Maybe seeing it in action at https://paulnigelhayward.com/gallery-2/ and looking at the modified code will help?

    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
    $('.ClickToShowEast').click(function(){
    $('.ShowWest').hide();
    $('.ShowWestButton').show();
    $('.ShowEastButton').hide();
    $('.ShowEast').show();
    window.dispatchEvent(new Event('resize'));
    });
    }); });

    .ClickToShowEast{
    cursor: pointer;
    }
    .ShowEastButton{
    display: none;
    }

    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
    $('.ClickToShowWest').click(function(){
    $('.ShowEast').hide();
    $('.ShowEastButton').show();
    $('.ShowWestButton').hide();
    $('.ShowWest').show();
    window.dispatchEvent(new Event('resize'));
    });
    }); });

    .ClickToShowWest{
    cursor: pointer;
    }
    .ShowWest{
    display: none;
    }

    Thanks.

  4. the code works well, but everything I click the clicktoshow button, I goes back to the top (hero section). and also the button is not showing in mobile view

    1. Hey Kathy!

      I updated the code to prevent the going back to the top action.

      As for the button now showing on mobile, you will need to check your responsive settings... there is nothing in my code that changes the button's mobile visibility!

      Cheers!

  5. Hello there, i put this code to a webpage i am working on in about two months ago. Everything is working fine until the last 15 days ago when suddently the buttons stop working. Does anyone has the same issue as me?

  6. Hey! Really great piece of code with this I can finally create something like a flow sequence. 🙂

    The only question I would have: How would I need to modify the code to make the section not pop into existence, but somehow slides in. Something similar to what FAQ accordions often do.

    I believe It's not much that would need to be added but sadly JS is way beyond my head. 🙁

    Happy for all answers / ideas / help.

    With kind regards and thanks again!

    Chris

    1. After I wrote my comment I got an email with some templates from Maxime (thanks for that) 🙂

      I guess in there lies the solution because the "Elementor Amazing Show Section On Click Template" does excactly what I want. So what I did I added the animation code from the part of the Amazing code but sadly with no effect.

      Here is what I did but somehow it doesnt work:

      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.clicktoshow').each(function(i){
      $(this).click(function(event){
      event.preventDefault();
      $('.showclick').eq(i).show();
      $('.clicktoshow').eq(i).hide();
      }); });
      }); });

      .clicktoshow{
      cursor: pointer;
      }
      .showclick{
      display: none; -webkit-transition: transform 0.34s ease;
      transition : transform 0.34s ease;
      }

      1. Hey Chris!

        How about using the templates files I sent directly? These should be working fine, yea?

        Cheers!

      2. Hey! Well because it doesnt behave 100% like I want it to. For example the "show more" element disappears once clicked and thats perfect for my usecase and the premium template will keep the button visible.

        Its just that this code here is a 100% fit for what I need but a sliding animation when it shows more content would be just the icing on the cake 🙂

      3. Hey Chris!

        I understand. Here is how: in the code you will see these lines:

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

        Change them to:

        $('.showclick').eq(i).slideDown();
        $('.clicktoshow').eq(i).slideUp();

        Cheers!

  7. Ive created a container with three buttons that toggle 3 separate containers Its working just like it should. My question is how do i make it where when you click the next button the open container closes. so I only have one container open at a time. Hope that makes sense.

      1. hi,
        i've also used different containers that toggle. now this works perfectly fine but is there an additional way to click on the button of the open container again so it will close again?

        thank you!

      3. Thanks for the fast response and help! This little code is really something 🙂

        "Change .show(); to .toggle()"; wouldn't work for me. It toggles the wrong sections (my clicktoshow is a collum, mx showclick is a section, if it matters)

        my code looks like this at the moment

        document.addEventListener('DOMContentLoaded', function() {
        jQuery(function($){
        $('.clicktoshow').each(function(i){
        $(this).click(function(event){
        event.preventDefault();
        $('.showclick').hide();
        $('.showclick').eq(i).toggle();
        }); });
        }); });

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

        So toggling between the content is fine. But I can't hide the content again when I click the refering button.

        Cheers!

      4. Hey!

        Change the line

        $('.showclick').hide();

        to

        $('.showclick').not($('.showclick')[i]).hide();

        Cheers!

  8. Hey, I used the method you showed in your video, but for some reason when I click the button on my website, both the button and the hidden content disappears. I have an image as the background of the button and it is meant to reveal a gallery with 6 images. These images have titles underneath which strangely are the only content that actually gets shown, then if you click on the title, you see the image full screen.
    I simply just want to have a toggle to hide and show this gallery. Let me know if you have a solution, otherwise I will just make a very short page for the gallery, thank you!

    1. Use the on click code in the tutorial.

      Then change this line:

      $('.showclick').eq(i).show();

      to

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

      And delete:

      .showclick{
      display: none;
      }

  11. Hey, I need help, so there are two headings "Heading 1" and "Heading 2", By default heading 1 is visible. I want that if I hover on the icon heading 2 display and heading 1 should be hidden and when the mouse hover removed, heading 1 should be visible again and heading 2 hidden

  12. Hi, I am trying to use this to show a column, and it works, but I really need the new column to replace the original. Do I use $('.showclick').eq(i).hide(); for that?

    1. Sorry, I looked further into these comments and I think you answered this, also I am working with the entire section now, seems to be working well! Thanks so much for this article!

  13. Hi, again. I have two sections, each with a class of showclick. My links in both sections look like:

    <a class="clicktoshow">Next-Generation Firewall</a><br class="blank" />
    <a class="clicktoshow">Mobile Device Management</a>

    When I click on either link, section one shows up, section two never does. Not sure what's wrong? Should I have separate code and class for each, like
    <a class="clicktoshowmobile">Mobile Device Management</a>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
    $('.clicktoshowmobile').each(function(i){
    $(this).click(function(event){
    event.preventDefault();
    $('.showclick').eq(i).show();
    $('.clicktoshowmobile').eq(i).hide();
    }); });
    }); });
    </script>
    <style>
    .clicktoshowmobile{
    cursor: pointer;
    }
    .showclick{
    display: none;
    }
    </style>

    Thanks, this is fun!

  14. If you need to show an element that is dependent on JavaScript running on it, try this code instead if you are having issues with the code in the tutorial:

    <style>
.clicktoshow {
  cursor: pointer;
}
.showclick {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const clickToShowElements = document.querySelectorAll('.clicktoshow');
  const showClickElements = document.querySelectorAll('.showclick');

  clickToShowElements.forEach((element, index) => {
    element.addEventListener('click', (event) => {
      event.preventDefault();
      showClickElements[index].style.opacity = '1';
      showClickElements[index].style.pointerEvents = 'auto';
      showClickElements[index].style.position = 'relative';
      element.style.display = 'none';
    });
  });
});
</script>

    Cheers!

  15. help me, I want to make one hover so that two images can appear at the same time.
    I've read all the comments but can't find what I'm looking for. Thank You.

    1. Greetings!

      Use this code, and give the class name showhover to your images.

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

      Cheers!

  16. thank you for helping. but that's not what I want.
    I want to create, one hover icon displays two images, I have three icons and want to create a hover on each of them.
    but your code is quite good, I like it, just not like my plan, thank you if you still want to help.

  17. I placed the code in the container, in the container there is an icon. if I hover the mouse over the container, the icon simultaneously produces an animation, more briefly one hover in the container executes 2 commands. 1. animation on the icon 2. displays two other containers simultaneously.
    in total there are three icons. and want to run each icon but not simultaneously. Thank you in advance for wanting to read this. I think this is too much but this is what I imagined. If you want to help I am very happy and grateful, but if not, that's okay.

  18. Hi Maxime,
    This code is awesome. I have two buttons and am able to show and hide the different sections based on this code. However I want the first section to be visible by default. And if the user hovers to the second button the second section shows. I am unable to show the first section by default, without hovering on the first button. Could you please guide me on how to achieve this?

    Thanks.

  19. Thank you for this code it worked perfectly! I just fought with chatgot for 3 hours to try to do this. whoever you are you are smarter than AI xoxoxoxo

Leave a Reply

Element.How Newsletter

Sign up for our newsletter to get Elementor related updates and tutorials

Close