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 svg, .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!

300 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://element.how/.../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 ?

      1. Thank you for code .I have a multi steps forms inside this code and when i click next the page reload and my form disappear. Can you help me please

      2. I'm not certain why that would happen. Try showing the hidden section by default, see if that fixes it.

  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. Hey Marcelo!

        I did help out Nico, and it worked just fine. If you are having problems, try importing the templates received while signing up for this website.

        These should be working fine. If they are, it means somehow there was an error while following the steps above. If the templates are also not working, it might be your particular setup such as server, optimization, etc.

    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.

      1. Hi Maxime, Wondering if you could please contact me regarding a. project id like some assistance for this very thing.

  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

      2. I am having the same difficulty—I have the button with a hidden section below, which opens correctly.

        However I have a button at the very top of the page, which I want to jump down to the hidden section, and unhide that section.

        I've followed the same settings as Tobias.

      3. I will have a tutorial soon that will allow for these situations. It's not ready yet though.. maybe within a few weeks.

  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.

  68. Hi Maxime, the code works but when opened, the section is flattened and not extended and is not whole.. a text element that should appear first (instead of the second) disappears
    Any tips?

  69. ok i fixed by reading the answers ( adding $('.showme').closest('.elementor-section').next().slideToggle();

    Last thing...works the same if i put a text message instead of the icon? Is it possible to add the switch function "show more/show less"?

    1. Here is the code for that. You need to use the Elementor Button element for it to work.

      <script>
      document.addEventListener('DOMContentLoaded', function() {
      jQuery(function($){
      $.fn.extend({
      toggleText: function(a, b){
      return this.text(this.text() == b ? a : b);
      }
      });
      $('.showme').click(function(){
      $(this).closest('.elementor-section').next().slideToggle();
      $(this).toggleClass('opened');
      $(this).find('.elementor-button-text').toggleText('Show','Hide'); /* Edit texts to what you want!*/
      });
      $('.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>

  70. Hi Max,

    I'm having issue with the slideToggle() function.

    On first page load, the slide toggle doesn't work (it does reveal the hidden section, but It is not obvious that it has been revealed. Which would result in a lot of missed opportunities)

    If I scroll down *after* reveal, then the slideToggle works fine (opens and closes).
    here's the page --> https://locallogic.co/inman

    any idea what's happening? Thanks!

    How can I get it to work as expected on first page load?

    1. Hmm you simply need to have stuff below!

      Or you could add an ID to the section that's hidden, and an anchor link to that ID in the 'showme' button. Same as how the template I sent you by email works, the one with the large background images.

  71. Hi Max,
    I'm using your code on multiple sections ..... & it works perfectly fine with me .......

    I encountered one minor problem though ...... there is a specific section where I have a mosue track effect enabled on the background of that section ........ & for some reason it works perfectly fine on all sections except for this one .....

    it behaves wierdly enough that instead for interacting with the mouse as normally as it suppposed to be ( like this: https://ibb.co/zftN63N )...... the background top left corner is stuck near the cursor point ( like this: https://ibb.co/GtJ50pp )

    & for some reason when I remove that mouse tracking effect .... it works fine
    can you help me please

    1. Hey Amir!

      Maybe the mouse track code just isn't compatible for sections with dynamic visibility... As my code is working in most cases, I will keep it as it is. The problems is probably in the way the mouse track is coded anyhow, something I can't change. Thanks for reporting the problem though!

  72. It's ok ...... I've actually managed to work it somehow by writing some custom JS codes that hide sections instead of using the default elementor hide/show switch..... with a little bit of delay before hiding the sections..... it worked........
    I don't really know why but it did :')

    ........only one last thing now ......can I make your code only show sections upon clicking without hiding it if it got clicked again

    I thought about making the button disapppear upon clicking .....but I don't really think that's a good idea to go around.....

    can I make a little tweak to make your code so that it only shows content & not hiding it afterwards ??

    thanks in advance

  73. hello, thank you so much for your posting. the code works great with my website, though i want to know if it's possible to hide the toggle button after click too? here is the code that i have used :

    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
    $('.togglebutton1').click(function(){
    $('.section1').slideToggle();
    $(this).toggleClass('opened');
    });
    $('.togglebutton2').click(function(){
    $('.section2').slideToggle();
    $(this).toggleClass('opened');
    });
    $('.togglebutton3').click(function(){
    $('.section3').slideToggle();
    $(this).toggleClass('opened');
    });
    $('.closebutton1').click(function(){
    $('.section1').slideToggle();
    $('.togglebutton1').toggleClass('opened');
    });
    $('.closebutton2').click(function(){
    $('.section2').slideToggle();
    $('.togglebutton2').toggleClass('opened');
    });
    $('.closebutton3').click(function(){
    $('.section3').slideToggle();
    $('.togglebutton3').toggleClass('opened');
    });
    });
    });

    .closebutton1 a,.closebutton1 i,.closebutton1 img,.closebutton2 a,.closebutton2 i,.closebutton2 img,.closebutton3 a,.closebutton3 i,.closebutton3 img,.togglebutton1 a,.togglebutton1 i,.togglebutton1 img,.togglebutton2 a,.togglebutton2 i,.togglebutton2 img,.togglebutton3 a,.togglebutton3 i,.togglebutton3 img{
    cursor: pointer;
    -webkit-transition: transform .34s ease;
    transition: transform .34s ease
    }

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

  74. 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!

      1. Hey Eleftheria!

        To make it closed by default, go under Advanced > Responsive > hide for desktop, tablet and mobile!

  75. hello, I've used the 'show me' class on a whole section to reveal the section beneath it, which works great, but when I tried to add the 'closebutton' class to the whole section below it did not appear to work.
    Is it possible that you can click the whole section and not a button?
    any help appreciated 🙂

    1. Indeed, the code would require a small modification for this to work. Try this instead: add the 'closebutton' class to the column, all of them if you have more than 1. Then it should work as you want here...

  76. Hello and thanks for the tutorial! i want the hidden section to be hidden by default, so I hide it on desktop, mobile and tablet like you explaind. but the section that opens is showing not correctly (only 1/3 of it's height...) i need it to show the full section height
    any idea why it happens to me?

  77. Hello Maxime, thanks for the code! I have a question. I have mutliple sections below the button with 3 different CSS classes and i would like to open each CSS class with another click. For example: Click 1 opens CSS class "hidden" Click 2 opens "hidden2" Click 3 opens "hidden3" and on the fourth click everything is closing.
    With this script i can only open "hidden" but how i continue with click 2 and 3?
    Could you help with that?
    Thanks for your help!

    document.addEventListener('DOMContentLoaded', function() {
    jQuery(function($){
    $('.showme').click(function(){
    $('.hidden').slideToggle();
    $(this).toggleClass('opened');
    });
    $('.closebutton').click(function(){
    $(this).closest('.test').prev().find('.showme').click();
    });
    });
    });

  78. Hello, I'm having an issue where when the section is "hidden" in the advanced options to make it "default closed" its changing the image gallery that is in the hidden section. The image gallery I'm using has 9 images but when I set the responsive mode to "hidden" and the section is toggled "open" on the live website it only displays 1 image, the first image in the gallery. IS there any way to fix this so the entirety of the gallery is shown when toggled open from "default closed"?

  79. Hi Maxime, thanks a lot !! I tried to paste the code but only the image (icon) rotate. The hidden text doesn't appear. I put the html above the inner section. I have 5 columns, like in your example, I want the text widget appears when I click the image element above.

    Then I tried the code you gave somebody else in the comments : "$('.hiddensection').slideToggle(); "
    and I gave a class to the text element.

    Now I works well but the thing is, when I click on image in column 1, all texts from the 5 columns appear !

    I would like to reproduce your example (each text appears for each column). Should I put a different class for each and copy the code in each column ?

    Thanks !! (Here's the URL : https://amanda.luminaweb.fr/)

    1. Hey Virginie!

      Should I put a different class for each and copy the code in each column ?

      That would work! Not ideal, but it's the way for JavaScript newbies. That's where we start learning!

      Otherwise I don't have the code ready. My example works a bit differently... you should have received the template for it when you logged in the first time on my site. Just use that and go from there!

  80. For anyone using an svg icon as the button and looking to change the color, you can do so using a filter. First set the starting color and hover of the icon.

    In my instance, i only needed the icon on mobile so i didn't bother about the hover state color.

    using fill: will not work, so instead you can use a filter command. However, getting the right values is not easy. But you can use this little tool here: https://codepen.io/sosuke/pen/Pjoqqp

    Also note that if your starting color is not black, you will need to add "brightness(0) saturate(100%)" as indicated in the tool.

    Then once you got your color, you pop the filter in the html provided by Maxime, like so for example:

    .opened i , .opened img,.opened svg{
    filter: brightness(0) saturate(100%) invert(62%) sepia(55%) saturate(2477%) hue-rotate(358deg) brightness(102%) contrast(106%);
    }

    Works!

  81. Hey there!
    Your code works perfect 😀 Thanks a lot for your time on this... i have a situation that im thiking that is not working with me because im not using a BUTTON for this, i need to use a SECTION as a "button" to show a widget (shortcode), can this be done?

    GREETINGS FROM CHILE!

      1. Yes, that won't work with the design here... for this, use that code instead, and give your inner section the class 'showme'!

        <script>
        document.addEventListener('DOMContentLoaded', function() {
        jQuery(function($){
        $('.showme').click(function(){
        $(this).next().slideToggle();
        $(this).toggleClass('opened');
        });
        $('.closebutton').click(function(){
        $(this).prev().find('.showme').click();
        });
        });
        });
        </script>
        <style>
        .showme a, .showme svg, .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>
        
  82. Hi Element.how team,

    I have been reading through the comments to see if someone has the same question, and I think I may be close but not 100% sure.

    I am wanting to use the hide/show set up on my website FAQs page, so I will have a number of questions and I want the answers to be hidden until clicked. I have followed the tutorial and I can see my questions, my icons rotate, but the answers don't show. The page maybe 'jumps' a few times as if it is trying to open and close before returning to stillness.
    From other answers I am wondering if I am adding the html code too many times as I have it under each question, but then I am not sure how to create different hidden answers.

    The FAQs are set out in two separate section columns side by side.

    Hope you can help, I am not very good but I am trying to learn, thanks!

    1. Hey Victoria!

      Yes indeed. It's very important to have the HTML element with the code in it only ONE time per page. Otherwise it will cause the problem you describe!

      It will still work for many such sections, your buttons just need the proper class of 'showme'.

      1. Hi Maxime,

        Thank you for your response. So where would I position the html if the set up was in such a manner
        FAQ1
        Answer 1(to be hidden)
        FAQ2
        Answer 2 (to be hidden)
        etc.

        I have two columns following this list style design, as from what I understand with the html code it would only be responsive to the item immediately below it?

        Thank you
        Victoria

  83. Hi,
    thanks for your amaizing work! I've inserted the code into a HTML section. Then inserted text into another section. Above put an icon into another section. This works like a charm. Then I made two sections with icon and text in the same way, but unfortunatelly this doesn't work. When I move the cursor above the second icon, that is not clickable. What colud be wrong? Can you please help me? Thanks!

    1. Hey Francesco!

      This is because you have the code more than 1 time on the page. Even if you have multiple show hide sections, the code itself is required ONLY ONE TIME on the entire page.

      Hope this helps.

      1. You are right. I didn't check first. Usually this bugs happens because the code is present more than one time.

        Now I checked your site, I can see the problem. You added showme to the parent container (the section), as well as the heading within that section. So it triggers the code twice when clicking the heading, as you are clicking two elements with the class 'showme' at the same time.

        Make it so only one element with the class showme is clicked, and it should fix this!

        Cheers!

  84. Can this be done on a menu item? with a close button on the hidden section? I have tried but the close button closes the hidden section but it automatically reopens again?

    1. Yes it can, however it's possible it would require a few code adjustments, depending on your exact setup and requirements! You can message me (see footer) if you want paid help for this.

  85. Hi, thanks for this great snippet! I noticed that you try to have this on header (using elementor theme builder) the section below the button/image/icon with the show me class doesn't show up. and I was wondering if you have any idea why this happens.

    1. Hey Cheyenne !

      Indeed it won't work as is in a popup. There, you need to remove this line at the start of the javascript portion (in between the <script> tags):

      document.addEventListener('DOMContentLoaded', function() {

      And also delete one instance of these three characters at the end of the javascript portion

      });

      Then, it should work in a popup. The HTML element with the code also needs to be in the popup.

      Cheers!

      1. Hi! This works in preview, but once I apply the popup to a button, it no longer works. Any thoughts? Thank you for the quick reply!

      2. Just realized me message wasn't fully visible.. I updated, please check my comment above and let me know if that works!

      3. Good news, I figured out the issue. "Optimize JavaScript Code" in the Autoptimize plugin was the culprit. It's working now that I turned that off.

Leave a Reply