Amazing Elementor Show Hide Section Button

No extra plug-ins required! Elementor Free Compatible.

This is how you can very easily create an Elementor section that is not visible by default, but that will show or hide itself on button or icon click.

To begin with, create an html element on the page where you would like that functionality, and add this code in it (click the icon to show the code).

Amazing Elementor Show Hide Section Button
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.showme').click(function(){
$(this).closest('.elementor-section').next().slideToggle();
$(this).toggleClass('opened');
});
$('.closebutton').click(function(){
$(this).closest('.elementor-section').prev().find('.showme').click();
});
});
});
</script>
<style>
.showme a , .showme i , .showme img, .closebutton a, .closebutton i, .closebutton img{
cursor: pointer;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.opened i , .opened img , .opened svg{
transform: rotate(90deg);
}
</style>
Amazing Elementor Show Hide Section Button

Then, create the icon in the section above the Elementor section you want to show / hide on click (behave as an accordion)

You can also use a button or image element.

Give that element the class 'showme'.

Finally, hide that section for all viewports (if you want it hidden by default)

Amazing Elementor Show Hide Section Button

Important: if using a button, empty the ‘link’ field. Otherwise it will reload the page (or move to the top).

It will work for as many sections you want like this on your page!

Also keep in mind that the icon or button will only show / hide the Elementor section right below it!

It also works with inner sections, allowing for these possibilities.

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

If you want a close button in one of the expanded section, simply give it the class 'closebutton'.

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

Get these templates if you are interested, and to support the website!

234 Responses

  1. Very good effect but I have one question, Are you able to use this effect to to make side by side elements within the same section open and close independent of each other.

    Refer to this image and it will give you an idea of what Im refering to....... Thanks

    https://ibb.co/wyRLNGK Image Link

    1. Philippe Leroux This tutorial doens`t allow for this... However I did code something very similar for a client, but it goes beyond the scope of the article here.

    2. Well in fact I just updated my article with a similar example, as my code also works for inner sections so you can get something quite similar to what Matty shared!

  2. Hi,
    It works but for me the section by default is opened (I use a button). How do I make it closed by default. I want to open it when I click on the button and close it when I click again. Thank you!

  3. I'm having the same trouble as Olivia. I tried hiding the viewport for all but I can't get the section to appear on button push.

    1. Maxime Desrosiers hello, Maxime. Did you solve the problem Jim and Olivia had? I also need the section to be closed by default, and it has to open at clicking the button. Can you help me with that as well? Thank you

    2. Egor Ko you need to hide that section for all viewports (if you want it hidden by default) (seehttps://elementorcodes.com/.../10/dion_nodisplaysection.pngg )

  4. I have the same issue as Olivia. The section by default is opened and I also use a button. I want to make it closed by default. I want to open it when I click on the button and close it when I click again. Can you help?

    1. I would like to mention here that I helped Cornelia in private, and she got this working! Just needed to follow the part of my article that is accessed by clicking the other right chevon icon.

  5. hello, this is great but I have 5 icons on my page and I want each icon has it's own separate open/close section. how do I do that?

    1. Yes that would work! just follow the instructions! Give them all the class ' showme ' , and the upcoming section will be opened by clicking on them!

  6. Helo,
    Sorry for my english but how to ??? : You need to empty the 'link' field of the button, to prevent the page reload! ?? Where can i do it in the settings ?

  7. Hello, I can't manage do do this. I did the tutorial step by step. I have a main section with a button, the buttons class is 'showme'. Above the button is the html element with the code. Under the button is the inner section element containing 3 columns. Does the inner section element also need to have a class or something. And yes, the button link is empty. Thanks 😀

    1. Aleksis Aleksandrs Vilnitis For inner sections, the button also needs to be within an inner section. Otherwise, it won't work as expected... the other section below will become the accordion

  8. Hi there, fantastic tutorial. i'm a small business owner just only just getting started with elementor. i tried this and worked like a charm. im just wondering if there's a way to edit it such that it opens another section with its own defined css class. would really appreciate it if you can point me in the right direction. i'm googling the .next() function because im assuming it has something to do with that.

    1. Thanks! Yes , this is possible, simply replace this part

      $('.showme').click(function(){
      $(this).parents('.elementor-section').next().slideToggle();
      $(this).toggleClass('opened');
      });

      with this (insert your own class name)

      $('.showme').click(function(){
      $('.specificsection').slideToggle();
      $(this).toggleClass('opened');
      });

    1. Yes this is possible! replace this part

      $(this).parents('.elementor-section').next().slideToggle();

      with this

      $(this).parents('.elementor-section').prev().slideToggle();

      1. by the way, If I want it to slide from the left to the right and not the top?

      2. Maxime Desrosiers Hello, thankyou for sharing good articles. Please help me, the code that you share for open a section above the elements can't work. Is there any solutions ? thankyou

      3. Evo Syah $(this).parents('.elementor-section').prev().slideToggle();

  9. Hi! Thank you for the code, it is very appreciated.

    I have two regular sections. The first regular section contains two inner sections: the top inner section contains my button and the bottom inner section is the one that I want to reveal. Under the first regular section is my second regular section which contains my recent posts. When I click on the button, it reveals the inner section just below it (which it is supposed to do), but for some reason, it simultaneously hides the second regular section (i.e., the one containnig my posts). The only work around I have found is to add an empty regular section between my two regular sections so that it gets hidden instead without affecting the visuals, but it is not practical. Do you know why it behaves like that? Thx!!!

    1. Salut Alexandre! You are right! The way the code was written, this made this happen...

      I updated the code to compensate for this, now it should work as intended!

    1. Nico Krauss I updated the code to make this work more easily. Now you should also get the same results as you can see in my examples in the article, when you are using the Elementor icon or button elements.

  10. Thanks for the awesome code. If I use multiple instances of this code on a page, each code needs to go into a separate html element? With a new class name?

    1. No, it works for any such sections on the page from the exact same code! So only one html element is needed, no matter how many buttons you give the class 'showme' on your page

  11. Hey this is perfect! Thank You, I was wondering if you could show us how to have the icon change or rotate onclick and how to have the button change text or color on click? Thanks again!

    1. Hey Ryan! If you use the normal 'icon' element, it should already rotate on click (as in my demos above!)

      For changing the button color on click, this is a bit more advanced. I might make another tutorial for this...

  12. This tutorial worked perfectly but is there a way to make the icon change to another icon when clicked open as I've used a plus sign so the rotate function doesn't show. Thanks!

  13. Awesome tutorial! I could make it work with sections and inner sections, but the icon does not rotate. I’m using the “icon” widget with the chevron font awesome icon. Any ideas for what I’m doing wrong? Thanks!!!!

      1. Shelley, I think Goran means the Style tabs. There you can set a rotation... empty that field.

  14. Hi Maxime. Thank you, it works well for me. However, everytime I open or close the section, the sidebar jumps to the top of my page. Its a small page, so I can still see the opened section, but it impedes on the user experience. Is there a way to open and close the section without the page moving up? Thank you in advance.

    1. From the article: Important: if using a button, empty the 'link' field. Otherwise it will reload the page. (Or move to the top of the page.)

      Could that be the problem Alexandre?

    2. Hey Maxime Desrosiers. I have the same problem as Alexandre describes. I have uploaded your latest code in the HTML tag, Right under that I have used a button and emptied its link field. And given it the 'showme' class. Under the button is the section that is hidden. It shows when you press the button. However, when you press on it still reloads the page. Any idea what could be the problem? Thank you!

    3. Lucas Den Hollander As I wrote in the article, and just above in this very thread:

      Important: if using a button, empty the 'link' field. Otherwise it will reload the page (or move to the top).

    4. Lucas Den Hollander You mention having nothing set in the URL field, however that's the only reason why the page would reload... I have nothing in the code that would make the page reload.

  15. Hi there this has worked greatly for my website, but i was wondering if I can also show the section linking from another page?

      1. Maxime Desrosiers I see, what a shame it would be great if there was a further development on this topic. Thanks anyway

  16. Hi. this is great and I nearly got it working, but need your help, please - thanks for your effort in creating this trick and writing the article! I want to use the inner section feature. I have created a section and have added two inner sections inside it, with 2 columns each, so they sit on top of each other. When I click the Icon that I have placed in th einner section field on the top it opens and closes the complete bottom inner section, not just the area underneath the icon. What am I doing wrong?

    1. And just when I finished writing it occured to me! Create the columns in main the section. Then add two inner sections into each column on top of each other, icon into top, element into bottom. And it works 🙂

  17. Hi Maxime, thank you for the code, it worked good for me. I followed the instructions you gave to Ariff to open other sections and it worked well. I only have one little issue, basically I would like that when one section opens, the other one previously opened closes automatically. Now each section opens on top of the other one. Is it something you can help me with? Thanks a lot.

    1. This requires more complex coding, and is beyond the scope of this article... You might try using an accordion element, and inserting template shortcode in them, to get something similar, though.

  18. Great code, it worked for me in the Zakra theme.
    The problem i found is that im trying to hide an entire section that contais a woolentor widget, when the section shows up it's not centered in the page, it goes to the right side. If i remove the code the section shows normal, as the others in the page.

    1. Hey Mat!

      Try this: Show that section by default, as you normally would for any section

      Then, add this line of code

      $('.showme').closest('.elementor-section').next().slideToggle();

      just before that line of code

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

      let me know if that works!

  19. Just tried adding this to my site but despite follow the steps it won't work for some reason. I added the HTML element and pasted in the code from above. After that I added an icon (also tried with a button) and added "showme" under the CSS Classes section (also tried CSS ID for good measure). The icon is above the section I want to hide, so I hid the section on all devices and gave it a shot but it didn't work for whatever reason. Any idea where I went wrong?

    1. Is it in an inner section, or right in the section? It needs to be right in the section, if the section you want to expand is a whole new section. If you want to expand an inner section, then it needs to be in its own inner section, above.

    2. Maxime Desrosiers As far as I can tell it's all properly formatted, I tried making 2 fresh sections, dropped the button into the one above and some text into the one below, hid the lower section, and it still didn't work. The only plugin I have is Elementor Pro. Thanks so much for your help!

    1. Yes, and I explain how to accomplish this, right in the article! Read carefully! (and click on the icons to expand the content!)

  20. is there any possiblity to work in the inner section if one section clicked opened and then we click other section the rest of the section closes itself? something like alternate opening of sections?

    1. This is possible, but it`s beyond the scope of the article... There are many, many little features changes and options that are possible with this design, I can`t include all variations in this article.

      I want to keep thing as simple as possible, and that`s what I present here... for everything else, you can message me for custom work!

    1. Yes, but it`s beyond the scope of the article... And to answer your other comment, to understand what`s going on here, learn jQuery and Javascript! It will also allow you to modify the code to implement exactly the features you want!

  21. Show/Hide works but, when I click on the button, there is no smooth animation or anything and it redirects me to top of the page so I have to scroll down again to see the expanded section. How can I fix that?

    1. In the article, I wrote:

      Important: if using a button, empty the 'link' field. Otherwise it will reload the page. (or move to the top)

      That should fix this!

  22. The code works completely fine. However, if I set the height of the section to "fit to screen" it shows the opened section but doesn't scroll down to it. Any workaround for this please?

    1. You can use anchor link, and an anchor element. The button with the class 'showme' should link to the anchor element, that is within the section that expands.

  23. Hello! Thanks for this code, it's perfect for some new sections inside our website.
    I'm having a problem with some of the gallery widgets (the buttons and animations inside seem to stop working) and using a gallery with the justify layout just doesn't show anything when I open the closed section with the button, hope you can help me to fix this.
    Thanks.

    1. Yes indeed... gallery elements are a problem.

      Try with this code instead of what I provide above.

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.showme').click(function(){
      $(this).closest('.elementor-section').next().slideToggle();
      $(this).toggleClass('opened');
      setTimeout(function() {
      window.dispatchEvent(new Event('resize'));
      }, 400);
      });
      $('.closebutton').click(function(){
      $(this).closest('.elementor-section').prev().find('.showme').click();
      });
      });
      });
      </script>
      <style>
      .showme a , .showme i , .showme img, .closebutton a, .closebutton i, .closebutton img{
      cursor: pointer;
      -webkit-transition: transform 0.34s ease;
      transition : transform 0.34s ease;
      }
      .opened i , .opened img{
      transform: rotate(90deg);
      }
      </style>

  24. Amazing work. Thank you very much!!!

    I made inner section's class "show me" and whatever object you click on it works. But now it also rotates the image. How do i prevent images from rotating?

    Also an icon doesn't rotate don't know why 🙂

    Please see screenshot.

    https://prnt.sc/v8kzp9

    This is the elementor ss
    https://prnt.sc/v8l07d

    Thank you very much again.

    1. Maxime Desrosiers Is it possible only icons or objects with specific class rotate? When i delete those lines icons stop rotating too.

  25. Hi, I have tried the code (I like it) and the working is not ok for me. When I leave the section visible (responsive setting is "show" for desktop, tablet and mobile), the working is in opposite direction. When the icon is rotated down, the section is closed and when it points to the right, the section is closed. However, when I change the below section to being hidden in desktop, tablet and mobile view, nothing is happening when I click the button.

  26. I've tried adding this but if I have the default hidden then the button no longer works. It works originally - with default shown but not the other way. Thanks!

    1. Maxime Desrosiers Same failure for me. Only further: my icon (with the class "showme") doesn't rotate, whether I make the next section hidden on all devices or not. Also, the action is reversed when the next section is not hidden, but there is no action when the next section is hidden on all devices. I'm using Elementor Pro 3.0.6. I'd be okay with a non-rotating icon, although what I really want is text that says -READ MORE- and then -READ LESS-. I need it to default to -READ MORE-. I wish I could show you the dev version of the site, but it is proprietary. Let me know if you need more clues or if I can email you privately. thanks!

    2. I did notice that the class "showme" only got applied to the wrapper, which is the width of the column, and not to the icon itself.

  27. Hi.
    This post was really useful to me and I am trying to ues the modification you suggested to "Ariff Iskandar" 9By specifying the section to open/close.
    I am wanting to use this with 5 buttons, each controlling a different section, but When one is clicked, i want That section showing, and the other 4 hiding,
    Is there a quick mod to this code to just specify the Section (CCSClass), and action Show/Hide?
    I Appreciate any help on this.

    1. Hey Mark! This makes it somewhat more complex, and is beyond the scope of the article... I frequently code this kind of design for clients though, so you can send me a message if you are interested!

    2. Hi Maxime
      Thanks for you reply. The way I have done this is to code 5 HTML blocks for MyShowme1->5
      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.MyShowme1').click(function(){
      $('.MyClassName2').hide();
      $('.MyClassName3').hide();
      $('.MyClassName4').hide();
      $('.MyClassName5').hide();
      $('.MyClassName1').show();
      });
      });
      });
      </script>

      I really need to learn these languages now!

      Mark

    3. Maxime Desrosiers
      Mark Ragan Well, that code will work yes! Not particularly efficient or good looking, but we all start learning somewhere! That's what my code looked like when I first started!

  28. Hi, thanks for posting this code - it is exactly what I was looking for! However I am having some trouble, I've used multiple instances of the code on one page, and when doing so the hidden sections slide out momentarily but then instantly close. The URL is: https://clients.growth-by-design.co.uk/definit.../treatments. So for example, when clicking the "Find out more" button under "Wake up with makeup", the hidden section slides out momentarily but then slides back up. Same thing happens for the "Forever Young" part. How can I make sure the sections open as intended?

  29. Hi Maxime - I'm trying to use this code on https://bit.ly/2Ua1rOW. I've created a sticky section (Elementor Pro) that acts as a floating bottom bar, and I've added an "X" so that the user can close the bar. I think I followed your code correctly but it doesn't work. Can you help?

  30. If I put an image carousel in the hidden section and set the visibility to hidden on all viewports then it shows only one big image in the carousel instead of many small thumbnails. Only when not hiding the section at visibility it shows up the way I like it. Is it possible to hide initially but without the responsive-visibility settings? I think that messes up image distance setting in carousels

  31. Hi! This looks perfect for what I'm trying to do but doesn't work at all .. tried everything. Currently have an button with css class 'showme' above the section I want to show .. which is hidden by default. I have the html code above both sections in my hero section. Don't know what I"m doing wrong and wonder if this is still working?

  32. Hi, First of all, thank you for this tutorial! This works perfectly. I've managed to have 2 buttons, each button reveals a section. But if section1 is shown and I want to see the section2, section1 is still visible. How do I make sure that when I hit button2 section1 hides and section2 shows?
    Thanks a bunch!

  33. Hi Maxime, thanks for your share.. i have a question.. how i can make the icon change when i click on it? example: arrow down when is open, arrow up when i need to close it. thanks for your help.

    1. Hey Marco! Change this bit of code :

      .opened i , .opened img{
      transform: rotate(90deg);
      }

      to

      .opened i , .opened img , .opened svg{
      transform: rotate(90deg);
      }

      And adjust the degree to your liking!

  34. Thank you for a great function! Working like a charm. I have a question - I used it in header and my revealing section is something similar to mega menu. When i click at link in my revealed section to go to other page, on next page the section is already revealed. Is it possible to have it closed with every page reload?

  35. Thanks for the great function! It works perfectly when I have one section to open/close, but when I add it a second time on the same page it starts closing automatically when I click the open button

    1. Hey Lucas! You should only have one instance of the code on the page, even if you have many buttons with the class 'showme' !

  36. Hi, great article - thank you! I managed to make the code open multiple sections using the same button, but it automatically closes everything as soon as the button is clicked to open it (it briefly expands, then everything rapidly collapses again). I would like the same icon to be used for opening and closing all the sections but can't understand why it won't keep the sections open, until the button is clicked again. Assume there is something wrong with my script?

    <script>
    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
    $('.showme').click(function(){
    $('.hiddenBlock').show().slideToggle();
    $(this).toggleClass('opened');
    });
    $('.closebutton').click(function(){
    $('.hiddenBlock').hide().find('.showme').click();
    });
    });
    });
    </script>
    <style>
    .showme a , .showme i , .showme img, .closebutton a, .closebutton i, .closebutton img{
    cursor: pointer;
    -webkit-transition: transform 0.34s ease;
    transition : transform 0.34s ease;
    }
    .opened i , .opened img , .opened svg{
    transform: rotate(90deg);
    }
    </style>

    1. Hello Mel! there are a few errors in your JS code... try this instead :

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.showme').click(function(){
      $('.hiddenBlock').slideToggle();
      $(this).toggleClass('opened');
      });
      });
      });
      </script>

      1. Maxime Desrosiers that's perfect! Amazing, thank you so much - really appreciate your help! ????

  37. Hello, Firstable big big thumbs up for his tutorial 🙂 You made my day ! I use it and it works like a charms.
    Except for 1 thing.
    If i hide a section with text (1 or more columns) - it's works well
    BUT if i hide a section with text and images, or only images > When i open it with the button, the section below opens but it "moves" the entire website to the left (maybe 10-20 pixels) from the header to the footer. When i close, it comes back like it was.

    I don't if i'm clear enough (I'm using it with elementor on prestashop by the way) but i hope you'll have maybe a clue because it drives me crazy :))) anyway thanks for your help and again thanks for this great great tutorial !

    1. It's the ACF frontend plugin you have installed... For some reason, they use CSS with a !important tag, making what I show in this tutorial not work.

      You can fix this by making the hidden sections shown by default on all viewports, and using that code instead :

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.showme').closest('.elementor-section').next().slideToggle();
      $('.showme').click(function(){
      $(this).closest('.elementor-section').next().slideToggle();
      $(this).toggleClass('opened');
      });
      $('.closebutton').click(function(){
      $(this).closest('.elementor-section').prev().find('.showme').click();
      });
      });
      });
      </script>
      <style>
      .showme a , .showme i , .showme img, .closebutton a, .closebutton i, .closebutton img{
      cursor: pointer;
      -webkit-transition: transform 0.34s ease;
      transition : transform 0.34s ease;
      }
      .opened i , .opened img , .opened svg{
      transform: rotate(90deg);
      }
      </style>

  38. Thanks a lot Maxime for this post. You did really a great job. However, is there any way to display the toggle seciton as a popup instead of pushing contents below? Please, let me know your opinion.

    1. Yes it is! Add the class 'hsection' to your hidden section(s) and add this CSS code:

      .hsection{
      position: absolute;
      z-index: 9999;
      width: 100vw;
      }

  39. hi, im trying to add this to my page but no luck. the button is in a inner section thats inside section 1. i want to show section 2 on click. however, nothing happens on click, and the button appears faded out.

    please see attached for visual explanation https://ibb.co/fYWcgJF

    thankyou so much for this btw!

    1. Hello Isabela!

      Indeed, it won't work with the setup you have. The button needs to be directly in section 1, not in an inner section. Then, becasue it looks like you are using a gallery in the hidden section, you will need the code I shared in another comment to prevent a bug. This code :

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.showme').click(function(){
      $(this).closest('.elementor-section').next().slideToggle();
      $(this).toggleClass('opened');
      setTimeout(function() {
      window.dispatchEvent(new Event('resize'));
      }, 400);
      });
      $('.closebutton').click(function(){
      $(this).closest('.elementor-section').prev().find('.showme').click();
      });
      });
      });
      </script>
      <style>
      .showme a , .showme i , .showme img, .closebutton a, .closebutton i, .closebutton img{
      cursor: pointer;
      -webkit-transition: transform 0.34s ease;
      transition : transform 0.34s ease;
      }
      .opened i , .opened img{
      transform: rotate(90deg);
      }
      </style>

  40. Hi Maxime. Thanks for the write up. Can you please help with one thing. I have added the code, set up the buttons and hidden sections. All seems to work, however in 2 of the hidden sections I am using HTML widget for my CRM contact forms. On the 2 sections using HTML when I click the button it only stays open of around 1 sec then closes. Is there a setting or code I can add to keep the hidden sections open until the buttin is clicked again. Any help would be great. Thanks

    Here is the page.
    https://uefmpy8g.dreamwp.com/uncatego.../aa-test-hide-forms/

    1. Hi Again, So i did fix it. I copied and pasted a previously designed button and deleted the link. However there must been some code from the button still there that did not delete which casued the issue of the page to refresh. Designed a new button from scratch and it worked ok.

  41. This is very elegant. Works just as documented. I have one issue though. I am trying to show/hide a simple slider/carousel and if I start off with slider shown all is good. However, if I start with it hidden, then click to show it, the slides in the slider are all scrunched up or bunched and overlapped on the left hand side. Moving the slider with navigation restores it to proper functionality. Although I confirmed the hidden section is loaded with the page, apparently it does not have enough time to run its code and expand. Tried another slider but the same thing happened. Any thoughts?

    1. Yes indeed... some JS dependant elements are a problem.

      Try with this code instead of what I provide above. Let me know if it works!

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.showme').click(function(){
      $(this).closest('.elementor-section').next().slideToggle();
      $(this).toggleClass('opened');
      setTimeout(function() {
      window.dispatchEvent(new Event('resize'));
      }, 400);
      });
      $('.closebutton').click(function(){
      $(this).closest('.elementor-section').prev().find('.showme').click();
      });
      });
      });
      </script>
      <style>
      .showme a , .showme i , .showme img, .closebutton a, .closebutton i, .closebutton img{
      cursor: pointer;
      -webkit-transition: transform 0.34s ease;
      transition : transform 0.34s ease;
      }
      .opened i , .opened img{
      transform: rotate(90deg);
      }
      </style>

  42. Would it be possible to add a cookie in order to remember the last state that the user has chosen to view/hide a section? If so,.. how? 🙂

    1. Yes, however this would be custom work, as a good bit of code would need to be written... You can message me if you are interested!

  43. Thanks for all this work, Maxime!
    I'm having a bit of trouble getting the button to work with inner sections, so I had a couple questions...
    1. Can I leave the code as saying "elementor-section" or do I need to change it to "elementor-inner-section"?
    2. When I create a multi-column main section, the button doesn't recognize any inner sections placed within those columns. I made sure to keep the button out of any inner-sections, but it still doesn't work. However, if I make a new section below the one with the button, it will show/hide that section but ignores any columns, it just hides the whole thing.

    Ultimately, I can get the button to work with sections that are stacked vertically, but it's being a little obstinate with horizontal sections and I'm not sure why.

    1. Hey James! Yes, it works with vertically stacked sections only.

      To achieve my smartphone example, you need 6 inner sections: The buttons needs to be in their own inner sections, and below, another inner section with the content you want to toggle.

      For this to work horizontally, or for sections above or to the left, or for any element and not just sections, code modifications are required. That's something I code quite frequently for clients: a content switcher that directly answers their specific needs for a project. You can send me a message if you are interested!

      In the article here, I kept things as simple as possible. It can still be very useful for many applications, but indeed, certainly not all cases.

  44. Hi Hi,

    Really awesome this code and it works when I use the default of what you showed. But when I make some changes in it i cannot get it to work 100 % good. Probally my own fault.

    Because i wanted to open sections elsewhere on the site i gave the sections a different class and changed the code as you said in one of the comments overhere.

    But, with every section having a close button it did now work anymore. With playing around a bit, i did find a sollution for this. I changed also the close code and the panel was closing like i wanted.

    However, when i use the close button... the icon stays turned down (arrow) and is not turning back up. When i reopen the panel by clicking the buttion the icon is turning horizontally. How can i make this that when i close the panel the icon will turn horizontall again.

    This is the code i made:

    <script>
    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
    $('.showme').click(function(){
    $('.openpanel').slideToggle();
    $(this).toggleClass('opened');
    });
    $('.showme1').click(function(){
    $('.openpanel1').slideToggle();
    $(this).toggleClass('opened');
    });
    $('.showme2').click(function(){
    $('.openpanel2').slideToggle();
    $(this).toggleClass('opened');
    });
    $('.showme3').click(function(){
    $('.openpanel3').slideToggle();
    $(this).toggleClass('opened');
    });
    $('.closebutton').click(function(){
    $('.openpanel').hide().find('.showme').click();
    });
    $('.closebutton1').click(function(){
    $('.openpanel1').hide().find('.showme1').click();
    });
    $('.closebutton2').click(function(){
    $('.openpanel2').hide().find('.showme2').click();
    });
    $('.closebutton3').click(function(){
    $('.openpanel3').hide().find('.showme3').click();
    });
    });
    });
    </script>
    <style>
    .showme a , .showme i , .showme img, .closebutton a, .closebutton i, .closebutton img{
    cursor: pointer;
    -webkit-transition: transform 0.34s ease;
    transition : transform 0.34s ease;
    }
    .showme1 a , .showme1 i , .showme1 img, .closebutton1 a, .closebutton1 i, .closebutton1 img{
    cursor: pointer;
    -webkit-transition: transform 0.34s ease;
    transition : transform 0.34s ease;
    }
    .showme2 a , .showme2 i , .showme2 img, .closebutton2 a, .closebutton2 i, .closebutton2 img{
    cursor: pointer;
    -webkit-transition: transform 0.34s ease;
    transition : transform 0.34s ease;
    }
    .showme3 a , .showme3 i , .showme3 img, .closebutton3 a, .closebutton3 i, .closebutton3 img{
    cursor: pointer;
    -webkit-transition: transform 0.34s ease;
    transition : transform 0.34s ease;
    }
    .opened i , .opened img , .opened svg{
    transform: rotate(90deg);
    }
    </style>

    I hope you can help me.

    1. That's a bit of spaghetti code, and ideally would be written in a better way, but it's good for learning, and good job with it! You got quite close to what you want by youself... props on that!

      Replace your code with this:

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.showme').click(function(){
      $('.openpanel').slideToggle();
      $(this).toggleClass('opened');
      });
      $('.showme1').click(function(){
      $('.openpanel1').slideToggle();
      $(this).toggleClass('opened');
      });
      $('.showme2').click(function(){
      $('.openpanel2').slideToggle();
      $(this).toggleClass('opened');
      });
      $('.showme3').click(function(){
      $('.openpanel3').slideToggle();
      $(this).toggleClass('opened');
      });
      $('.closebutton').click(function(){
      $('.openpanel').slideToggle();
      $('.showme').toggleClass('opened');
      });
      $('.closebutton1').click(function(){
      $('.openpanel1').slideToggle();
      $('.showme1').toggleClass('opened');
      });
      $('.closebutton2').click(function(){
      $('.openpanel2').slideToggle();
      $('.showme2').toggleClass('opened');
      });
      $('.closebutton3').click(function(){
      $('.openpanel3').slideToggle();
      $('.showme3').toggleClass('opened');
      });
      });
      });
      </script>
      <style>
      .closebutton a,.closebutton i,.closebutton img,.closebutton1 a,.closebutton1 i,.closebutton1 img,.closebutton2 a,.closebutton2 i,.closebutton2 img,.closebutton3 a,.closebutton3 i,.closebutton3 img,.showme a,.showme i,.showme img,.showme1 a,.showme1 i,.showme1 img,.showme2 a,.showme2 i,.showme2 img,.showme3 a,.showme3 i,.showme3 img {
      cursor: pointer;
      -webkit-transition: transform .34s ease;
      transition: transform .34s ease
      }

      .opened i,.opened img,.opened svg {
      transform: rotate(90deg)
      }
      </style>

    2. Maxime Desrosiers mmm cant attach a picture. I changed the spaghetti code into your code 🙂 tonight we had spaghetti for dinner so probally i looked into the wrong receipe.

      Still, when I use the close button at the bottom side of the panel it closes the panel, but the icon in the first button to open it, will not rotate the icon back into horizontal position.

      I think this is because i have four buttons in a horizontal row (Thats why i made the showme 1,2, 3 etc) and the buttons open sections with different class names. that sections are made below eachother in elementor.

      Is there a way to get the arrow rotating back in horizontal position by using the close button ? I Really hope so because i really like this functionallity.

      And thanks to give me a good laugh with the spaghetti comment...

    3. Rhea van Jap 'Is there a way to get the arrow rotating back in horizontal position by using the close button ? I Really hope so because i really like this functionallity.'

      Hmm I thought it would ! Can I see your page ?

  45. I tried everything but never manged to make it work. Followed the instructions, placed the icon right above the content I want to hide/show, gave it the class name, cleared the link, read everything in the comments here and it's still not workin. I'm loosing my mind. Can anyone help, please?

  46. Hello Maxime, thank you for this awesome tutorial. I have a problem that on click the section shows, BUT it instantly closes again without clicking... I don't understand because i just copy and pasted your html, can you help?

  47. I love what you have done here and it was exactly what I was looking for. However, I am having an issue where the text I am revieling by clicking on the icon, does not drop down its bounding/outside box. ie. The black box in your example. It just displays over the top of it. I am basically trying to repeat wat you have done with the phone layout above. The only difference I can see is the text I am using is coming via a ACF field. but I can see whay that would make any difference. Also the 3 rows are generated by an ACF repeater but I can't see what that would make any difference. Also another small thing I have noticed. When I click on the icon, it does not rotae 90dec lke yours. Any help would be greatly appreciated.

  48. Hi Maxime... It is great but I have one issue... My section is shown by default. When I hide that secion in responsive settings, showme button stops work. How can I fix it?

    1. You have the code many times on the page... a modified version of it. Start over and follow the tutorial with my code, it should work! And the code should only be present a single time on the page!

    2. Maxime Desrosiers Thank you very much for your time! Ok I deleted one, and copied your original code.

      What I'm trying to accomplish is to open te sections below the arrows (and now with your original code this is working perfectly, rotating the icon as well) AND to open the section of the header over the white one that you can see on top of the page, using the plus button on the right, revealing a sort of mega menu . This section movement was working with the modified code, but now is not working anymore.

      Is this possible to obtain both movements with the same code?
      Thanks again!

    3. Andrea Buzzi Yea it's possible... just got to make the section position:fixed , If I understood correctly what you want. You will need to add a close button in there as well. give that section the class 'yournavigationsection' then add this CSS

      .yournavigationsection{
      position: fixed;
      top: 0;
      }

  49. Hello, please tell me how you can make it so that when you open the page, its description is displayed but not completely, and when you click on the link/button, all the content is displayed.

  50. Fantastic code! Everything works great except that my icon won't rotate. I'm using the icon box widget in Elementor. What do I need to do to make it rotate?

    1. Hey Jaylee! Glad you are enjoying the code! Simply change this line of code:

      transform: rotate(90deg);

      to this

      transform: rotate(90deg) !important;

      and it should work!

  51. Hi, thanks for this excelent code. I got it to work after I saw a the comment, hide on all devices. My purpose to use this code is for a mobile menu. My problem is that the chevron icon does not rotate as your? I'm not sure I understand how the icon rotate function works. I use an icon not image. Thanks in advance! /thomas

  52. I did Hide the Section in Responsive for all devices however it doesn't appear after pressing the button. It only works showing the section by default. Can you help please?

  53. Is it possible that the section slips over another section? Or that you can hide the other by clicking on the button / icon?

    1. Yes it probably is! However as there are so many different variations of the design that's possible, I can't include them all ... Those interested in a specific functionality can PM me for custom work!

  54. Hi, Awesome code, thank you!

    Question: I'm using the code with JetEngine (crocoblock) list grid. On first page load, everything works great (assuming I don't have lazy load turned on). But when I sort/filter the grid, the sections are no longer clickable, nothing hides or reveals. Any ideas how to keep the code working after sorts/filters/lazy load?

    Thank you!

    1. That's right, it won't work well then... because of the AJAX so the JavaScript isn't applied to the newly added elements. You would need to add all of this as a named function, then call that function after the AJAX is completed...

      Or there are a few other ways to make this work as well. All of them would need to be integrated dirtectly and tested out to verify it works well. A bit beyond the scope of the article, but if you are interested for paid work send me a message!

  55. Hi, I found this yesterday. I am playing with it. Great tool! I have a little problem. When the Elementor-section below is hidden (responsive tab or display:hidden) ánd full screen, the openend section shows not as full screen and not centered but a lot more to the right. Is this known? And is there a simple trick to solve this? I hope this post is not to late, as I see the last for 1 year ago. Thanks for helping

    1. You are using the 'makae section full width' toggle right? That uses JavaSript to calculate the size of the section, and won't work if the section isn't visible. I would suggest you instead use a normal section, set to full idth, and use a full width layout for your page. Most themes should have this.

      If yours don't, then you will need to show the section at first, so that the Elementor JS can accurately calculate the width of the section... then you might make it display:none, before the users get to it... All done in JS.

  56. Hi, I had this one my website for some time and now i realized that on mobile it opens and closes very quick on clicking in the button. Anyone had this issue?

    1. Do you have the same problem on the current page ? If it's only on your page (and not on this page, or in one of my templates) , then it means somehow you have the code duplicated....

  57. Hi, thank you very much for this tips!
    I tested this trick on a page and it works fine, but when I want to do this in a popup window it doesn't work anymore.
    An idea?

  58. Hi! Thank you so much for your tutorial. I have a question because for me it works very well however when i click on the button it shows the section however this section appears moved to the right leaving a white space on the left and cutting of information on the right. Do you know how I could fix this?

    1. Sorry forgot to mention that this only happens when I want it to be hidden by deefault so when i activate visibility setttings otherwise it works perfect.

    2. Dani Quiros (For reference for other readers)

      Show that section by default, as you normally would for any section

      Then, add this line of code

      $('.showme').closest('.elementor-section').next().slideToggle();

      just before that line of code

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

  59. In the above example button name is "VIEW INFO", while clicking it needs to change something like "HIDE INFO". Is it possible to change button name when clicked?

    1. Use this code instead, works fine!

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($) {
      $('.showme').click(function() {
      $(this).closest('.elementor-section').next().slideToggle();
      $(this).toggleClass('opened');
      });
      $('.closebutton').click(function() {
      $(this).closest('.elementor-section').prev().find('.showme').click();
      });
      jQuery(function($) {
      $.fn.extend({
      toggleText: function(a, b) {
      return this.text(this.text() == b ? a : b);
      }
      });
      $('.showme').click(function() {
      $(this).find('.elementor-button-text').toggleText('view info', 'less info'); /* Edit your text here, works for Elementor buttons only ! */
      });
      });
      });
      });
      </script>
      <style>
      .showme a , .showme i , .showme img, .closebutton a, .closebutton i, .closebutton img{
      cursor: pointer;
      -webkit-transition: transform 0.34s ease;
      transition : transform 0.34s ease;
      }
      .opened i , .opened img , .opened svg{
      transform: rotate(90deg);
      }
      </style>

    2. Maxime Desrosiers Thank you very much for this code.
      I've given 'closebutton' for the hidden section but close button is not showing up. Am I missing anything?

  60. Hi! Thanks so much for this tutorial 😀 Worked like a charm for me.
    Except: When I click the close button and the section closes, I need to scroll back up to the beginning of the section and the arrow icon. Is there a way to do this automatically, so the user won't have to scroll?
    Thanks

    1. Hey Larissa! Yes, that's possible, simply enter an anchor link in your close button link field ( #example ) . Then go to the section with the arrow icon, and under Advanced > CSS ID , also add 'example'.

  61. This is an amazing piece of art you poublished here 😉
    Just would like have also the ability that it not only opens/hide a section but also jumps/scrolls to it when clicked.

    How is this possible?

    BG

    1. This is possible, using anchors! Give the hidden section a CSS ID under Advanced, then link to this #cssID in your button or icon.

      1. Hi Maxime,

        thanks for your reply.
        I tried following:
        - Giving the hidden section the CSS ID 'section01'
        - Created after the hidden section another section and in this new section created a button with the link '#section01'

        What happens now is that it jumps to the top of the hidden section but it doesn't unhide the section.
        I also tried it with trhe anchor plugin and to reference to it but same behaviour, no opening of the hidden section.
        Last thing I tried is to not only having the link in the button to '#section01' but also to mention the CSS Class 'showme' in the advanced tab of the button, but again, no opening of the hidden section.

        Anyhting I am doing wrong or missing something?

        BG

        Tobias

  62. Hi Maxime,

    Avery clear and useful post as usual.
    Is there a way to modify this code so it will show the section once a form is successfully submitted?
    I tried using this code with the Send button on a form.
    The problem is that the clicking the Send button showed the section REGARDLESS of whether the form was filled and successfully submitted.
    Thank you

  63. Yes, there is a way to show a section once a form is successfully submitted.
    Below please find a code provided by Maxime.
    Place the code in HTML widget, give the section you want to show once the form is submitted a class name (e.g. success-section), and that’s it!

    <script>
    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
    $( document ).on('submit_success', function(){
    $('.success-section').slideDown();
    }); });
    });
    </script>

    Thank you Maxime for being so supportive.

  64. Hi Maxime thank you for your code! I followed your tutorial and everything works fine! But when I clicked the "button" to reveal a section, it will reveal then hide and reveal as per normal. Is there anything I did wrongly?

  65. Hi! Thanks for the code. I just encountered one problem. When the section expands, it doesn't scroll down to the shown section.

    I am using an icon and I remove the anchor text because if I won't, it will only scroll to the top and won't show the hidden section.

    Can anyone help? Thanks!

  66. Hi! Thank you so much for this tutorial and code! I am wondering if there is any way to have one button open/show all the sections below it, or just more than one. Thanks!

    1. Hey Amy! Yes this is possible.... Use the code below, and give your 'toggler' button the class 'toggler'.

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.showme').click(function(){
      $(this).closest('.elementor-section').next().slideToggle();
      $(this).toggleClass('opened');
      });
      $('.closebutton').click(function(){
      $(this).closest('.elementor-section').prev().find('.showme').click();
      });
      let opened = false;
      $('.toggler').click(function(){
      if (!opened){
      $('.showme').closest('.elementor-section').next().slideDown();
      $('.showme').addClass('opened');
      opened = true;
      } else {
      $('.showme').closest('.elementor-section').next().slideUp();
      $('.showme').addClass('opened');
      opened = false;
      }
      });
      });
      });
      </script>
      <style>
      .showme a , .showme i , .showme img, .closebutton a, .closebutton i, .closebutton img{
      cursor: pointer;
      -webkit-transition: transform 0.34s ease;
      transition : transform 0.34s ease;
      }
      .opened i , .opened img , .opened svg{
      transform: rotate(90deg);
      }
      </style>

  67. Hi Maxime,

    I use the code to reveal and hide the authors' description on my About page. When I click on the first author, its description appears. When I click on the second author, its description appears below the description of the first author. I would like for the description of the first author to be hidden when I click on the second author, so that there is always only one author's description showing at a time. Is there a simple way to do that with your code. Thank you again. Have a great day.

    1. Here it is. Use the code below instead of the code given in the tutorial. Each section you will want to show also will need the class 'showonclick'.

      The first button on the page with the class 'showme' will automatically be linked to the first section (or any other element) with the class 'showonclick'.

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $('.showme').each(function(j){
      $(this).on('click',function(){
      $('.showonclick').not($('.showonclick').eq(j)).slideUp();
      $('.showonclick').eq(j).slideToggle();
      }); }); }); });
      </script>
      <style>
      .showonclick{
      display: none;
      }
      .showme a , .showme i , .showme img{
      cursor: pointer;
      }
      </style>

      1. It works as magic! However, I removed "display: none", because as soon as I entered "showonclick" in the section, it disapeared from the Elementor editing page (I could no longer edit it). I prefer going in "advanced" --> "responsive" --> "hide on... desktop, tablet, mobile". That way I can still edit it in Elementor, but it does not show in the frontend untill the user clicks on the button. Anyhow, thanks again! Very appreciated.

Leave a Reply