Updated February 2024
In this tutorial, I'm going to show you how we can add an Elementor button that will toggle the visibility of any other element, including container and sections.
You can think of it as turning any Elementor set of elements into a toggle.
Here are are a few demos of what you will learn in this tutorial:
Features:
- Works with all elements
- Compatible with sections and containers
- Easy setup
- Flexible
- Accessible
Let's get started!
First, let's setup the class names for this Elementor show hide design
Every 'toggle set' will need one (and only one) element with the class name toggleElem, and one (and only one) element with the class name toggleContent.
You can have multiple such toggle sets on your page (as seen in my examples above).
Give them the required class under Advanced > CSS Classes
Ideally, you would probably want to use the button element as toggleElem, however any element will work.
To make this accessible, be certain that you have the "#" in the link field of your toggleElem element.
This goes if you are using an entire container as toggleElem, you will want to go under Additional Options > set the HTML tag to <a>, and then enter '#' in the link field. Be careful not to have any other elements within that also has <a> tags then.
Adding "closing" buttons
This is optional.
If you would like, you can add buttons (or any element really) within your toggleContent container or section, that when clicked on, will close the toggleContent.
Give them the class name toggleClose.
Important: if you choose to add closing buttons, you will need as many on your page as you have toggleElem and toggleContent elements. Say in total you have 10 toggleElem and toggleContent elements on the page, you will need 10 toggleClose elements as well. Point is, you can't have it just for some and not for others.
Now, let's add the code to your page
Add the code below in an HTML element, on the same page as your Elementor Show Hide Container (or other) is.
<script> /* Please login to get the code * The code will be for the Amazing Elementor Show Hide Section Button tutorial * Found at this URL https://element.how/elementor-show-hide-section/ */ </script>
Note that the code will automatically take care of hiding the toggleContent on the front end.
That way, you don't have to mess with the responsive settings, and then have to remove them all when you need to make an edit in one of the toggleContent container or section.
It will produce a small flash on page load though, but it should be barely visible, and even then only if you have this above the fold. Ideally it would be below the fold (i.e. below the part of the page that's visible on page load).
In this version of the code I also added support for Elementor popups. So you can have this custom toggle inside a popup as well.
How the code works
You might be wondering, how does this toggleElem knows that it should open that toggleContent. Good question!
It works with the index. In other words, when it shows up on the page, or more technically, in the DOM / source code.
So the very first element on the page with the class toggleElem with automatically be linked with the very first element with the class toggleContent (and if used, toggleClose). Element 2 with class toggleElem will be linked with element 2 with class toggleContent, and so on.
Adjusting the code
The JavaScript part should be left as is (except if you want an accordion, see below). Towards the end of the code there is some CSS, you might want to adjust it, in particular the transition for the icon in your toggleElem.
Making it an accordion
If you would like only one toggleContent to be open at a time, in other words for your set of custom toggles to behave like an accordion, change these two lines:
<script> /* Please login to get the code * The code will be for the Amazing Elementor Show Hide Section Button tutorial * Found at this URL https://element.how/elementor-show-hide-section/ */ </script>
to
<script> /* Please login to get the code * The code will be for the Amazing Elementor Show Hide Section Button tutorial * Found at this URL https://element.how/elementor-show-hide-section/ */ </script>
Adding anchors to the Elementor Show Hide Toggles
If you would like to replicate what you see in the example that's showcased in the fancy iframe 2 above, where it automatically scrolls to the opened toggleContent and then back up when you close it by clicking a toggleClose, it's quite simple.
You just need to add IDs to your sections / containers, and then link to these in the toggleElem and toggleClose elements.
In the Link field I entered #gettoknow.
In the Advanced > CSS ID field of the related toggleContent element, I entered gettoknow
Then, in the toggleClose element, in the link field, I have #aboutsection.
And finally in the "About" container, in CSS ID, I have aboutsection.
Finally, enjoy your Elementor Show Hide Anything toggles!
I hope you have enjoyed this tutorial!
Be careful going through the comment section and trying to make modifications from the comments you find there, as it was using an older version of the code. I completely rewrote the code in April 2023 so check the comments from that date forward!
Cheers!
442 Responses
Nice. Thank you for sharing.
Thanks!
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
Did you figure this out?
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.
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!
Philippe Leroux See the new example
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!
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.
hello Jim, if you have a link to the page where you tested that, I could have a quick look
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
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 )
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?
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.
Maxime Desrosiers Thanks again for your help, Maxime!
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?
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!
Maxime Desrosiers Thank you for the help but those 5 icons were inside a one section.
Did you get any help with this, I´m doing the same thing but the buttons always open the first section below... I have 6 icons in one section, all have "Showme" class.
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 ?
I helped Christophe Barbault resolve this in private, he got this working!
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
I'm not certain why that would happen. Try showing the hidden section by default, see if that fixes it.
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 😀
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
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.
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');
});
is there a way to make it work to open a section above the element revealing the section instead of under?
Yes this is possible! replace this part
$(this).parents('.elementor-section').next().slideToggle();
with this
$(this).parents('.elementor-section').prev().slideToggle();
Maxime Desrosiers tnx !!!!!
by the way, If I want it to slide from the left to the right and not the top?
Bar Gabbai Not possible with the current code!
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
Evo Syah $(this).parents('.elementor-section').prev().slideToggle();
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!!!
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!
Thank you Maxime, it works like a charm!
How can you make the icon rotate? or replace the icon? I want to use a + and -.
Thanks 🙂
I'd also love some help doing exactly this if you've found a way
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.
Just wanted to say thank you for this tutorial, exactly what I was looking for and worked perfectly!
Thanks Zaima! I'm glad to hear this!
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?
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
Awsome thanks! is there a way I can hide the section on page load?
Yes! click the other right chevron icon for these instructions! Right below 'Give that element the class 'showme'.'
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!
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...
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!
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!!!!
Hello Luiz! Could you share with me the page where you have this setup? I will have a look.
Hello Luiz. Try to delete degree number in icon's advanced tab. Works for me. Sorry for my english.
What is the "degree number"? - which section of the advanced tab?
Shelley, I think Goran means the Style tabs. There you can set a rotation... empty that field.
Goran Savičić Thanks Goran! That would fix this indeed!
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.
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?
Maxime Desrosiers, sory for the delay. It was exactly that! Thank you so much.
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!
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).
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.
I used this method and in theory it's perfect, but in execution it's not working correctly. When you press the icon to open the section it opens and closes 4 times but then finally closes and never stays open. Is there any way to fix this? Here's the page for reference: https://stagedoorcentral.com/show-catalog/ . Thanks so much!
You have many instances of the code on the page. Only one instance is needed.
Hi there this has worked greatly for my website, but i was wondering if I can also show the section linking from another page?
This is possible, however it is beyond the scope of the current article!
Maxime Desrosiers I see, what a shame it would be great if there was a further development on this topic. Thanks anyway
Nikki Wilkinson If you know a bit of coding. you can mix this tutorial with that one here : https://element.how/elementor-open-specific-tab.../
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?
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 🙂
Markus Erdmann Exactly right! glad you were able to make this work!
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.
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.
did you resolve this?
Huge thanks for this Maxime, and for the rest of the site, it's brilliant. All kinds of stuff I've wanted for ages.
Thank you for the kind words!
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.
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!
Maxime Desrosiers It worked great! Thank you so much!
Dani Quiros Great! Really glad you found the answer!
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?
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.
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!
Any update here? I'm having the same issues. Thank you so much!
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.
Works perfect! Just one question: it's opened on pageload. Can I hide as default and open on click?
Yes, and I explain how to accomplish this, right in the article! Read carefully! (and click on the icons to expand the content!)
Thank you very much! The code works perfect.
Thanks!
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?
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!
it did'nt work on my, tried to a section with 2 columns, 2 html elements and 2 buttons, didn't work
Only a single HTML element is needed. Please share your URL so that I can check why it is not working!
Hi Maxime. Is it possible for multiple buttons with the same class to open the hidden element? I have 5 buttons with the same CSS class and I want all to open the same element. However, this only works with the first button but not with the rest. It would be so much appreciated if you could help, this is an amazing function just what I needed.
Hey Jade!
Change this line:
jQuery(contents[i]).slideToggle();
to this:
jQuery(contents[0]).slideToggle();
Cheers!
Any way to make the 'showme' icon disappear till close is pressed?
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!
Maxime Desrosiers Cool, thanks
Aakash Arasu can you tell me the code? please im searching that
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?
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!
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?
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.
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.
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>
Maxime Desrosiers Thanks a lot, that definitely does the trick!
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.
Welcome!
Delete these lines of code to prevent this!
.opened i , .opened img{
transform: rotate(90deg);
}
Maxime Desrosiers Is it possible only icons or objects with specific class rotate? When i delete those lines icons stop rotating too.
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.
I have this problem as well.
Joana Matos Looks like a few of you have this problem... what version of Elementor are you using please?
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!
I don't know why that would be... I would need to see the page
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!
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.
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.
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!
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
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!
Hey, Mark, please can you tell me how i can implement this
Hello, can I have some helps. I love it, but it is not working on mobile version. Not sure why.
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?
Don't worry, I've worked this out! It's because I had more than one HTML element in the page, when you only need the one.
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?
Decided to use https://element.how/elementor-remove-section.../ instead.
Wow, Thanks a lot ???? ! Awesome ????
How make buttom/ icon after click like on this page?
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
Ah, found it, added this: $('.showme').closest('.elementor-section').next().slideToggle();
András Pál Good solution indeed. Cheers!
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?
Let me see your page where you are testing this!
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!
Oh I managed to make it work! (:
How did you do it? I´m having exact the same problem...
Nurdianna Junaidi Great, good work!
Maxime Desrosiers Hey thank you, but I havent managed it, can I send you a Screenshot what I mean? 🙂
Mehmet Arslan Yes, send me a message through Messenger!
hey, im trying to do it on Elementor For Prestashop, I put the code in a .tpl file, and hook this file on my page.
On my button I've added the showme class and created a section just below it and hide it for all viewports.. But nothing happens when i click on my button.
The page is https://duncan-nice.com/content/16-costumes-sur-mesure and the button is the first "VOIR PLUS" button
Thanks
Sorry... This is a WordPress and Elementor blog!
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.
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!
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?
Sorrry, my bad, I had wrong settings. Everything works as should. 🙂
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
Hey Lucas! You should only have one instance of the code on the page, even if you have many buttons with the class 'showme' !
Maxime Desrosiers Aaaah okay thanks!!
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>
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>
Maxime Desrosiers that's perfect! Amazing, thank you so much - really appreciate your help! ????
Mel McKernan Great, glad to hear it's working as you want!
I have added this and for some reason the html element is showing by default.
Not certain what you mean by this... Share the URL maybe ?
Maxime Desrosiers hi the url is staging2.hastings-pier.com
Scott Evenden Everything looks good... maybe you fixed this already! And it seems to be working just fine as well.
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 !
That's ok i found the solution (put "overflow:scroll" to body) :=)
Elvis Comme le Chanteur Great, glad you got this working!
I'm using this on a couple pages. I was having no problems until today I noticed mobile won't toggle on/off sections
Example: https://mathcircles.org/activity/gerrymandering/ (arrow)
Example: https://mathcircles.org/test-activities-page-2/ (plus sign/text)
I've gone through and deactivated most plug-ins and i've updated both my Astra Pro and Elementor pro. I would greatly appreciate any help!
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>
Maxime Desrosiers I never got around to thanking you! It works like a charm. https://mathcircles.org/activity/gerrymandering/
Spencer Bowen Welcome! You did a great job with this... looks good!
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.
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;
}
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!
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>
Maxime Desrosiers perfect! thank you so much!
Maxime Desrosiers Another quick question: is it possible to snap to the section on button click? Thankyou!
Isabela Celes Yes, simply use an anchor in the link for the button, as you normally would!
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/
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.
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?
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>
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? 🙂
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!
Hi. Verry usefull tips ! Thanks
Welcome!
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.
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.
Hi Maxime, Wondering if you could please contact me regarding a. project id like some assistance for this very thing.
Email sent. Cheers!
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.
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>
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...
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 ?
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?
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?
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.
This is a link to the page that may help. https://wordpress-241034-1814610.cloudwaysapps.com/about-us/
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?
This is really great, thank you so much! I have just one problem: my showme element is not turning. I read the comments, tried an image, a button and an icon, but nothing changes. If you could help me explaining what I'm doing wrong, it woul be great. This is the page: https://newidentity.marcopolosrl.it/index.php/factory/
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!
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!
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;
}
Maxime Desrosiers Thank you so much Maaxime, it works like a charm!
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.
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?
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!
Hi, any way to disable transition for open and close? Like you have on switcher - buum... content is there.
es, change
slideToggle()
to
toggle()
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
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?
https://asip.co/store/portraiture-booking-options
Is it possible that the section slips over another section? Or that you can hide the other by clicking on the button / icon?
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!
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!
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!
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
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.
Hi, just wanted to say a massive thank you. Works a charm and renders several paid plugins completely unnecessary!
Welcome!
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?
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....
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?
For this to work, add the code in a HTML element, IN the popup.
And delete these 2 lines :
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?
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.
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(){
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?
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>
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?
It was my mistake, I've done it properly.
Working fine now.
Omg. This is amazing. It worked. Thanks Maxime for sharing this with us.
Welcome!
Maxime Desrosiers Thanks so much for your help, this first code you provided works fine but when i click read less, it doesn't go back to read more. please you can open my URL http://www.divinerevelationuniversity.com and click on read less after clicking on read more and see what an talking about. Thanks
Tested your link, works fine!
How can I have it closed by default and it only open on click?
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
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'.
Perfect, that works! Thanks for the quick reply
This is amazing thank you for sharing!
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
This is possible, using anchors! Give the hidden section a CSS ID under Advanced, then link to this #cssID in your button or icon.
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
Hey Tobias. At this point I would need to see your page!
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.
I will have a tutorial soon that will allow for these situations. It's not ready yet though.. maybe within a few weeks.
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
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.
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?
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!
This should be working with anchor text... Do you have a link to where you tested this?
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!
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>
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.
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>
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.
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?
Hey Gianluca!
I don't understand what you mean by a flattened section. Could you share your page URL with me?
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"?
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>
but doesnt work for mobile?
This is brilliant. Thank you so much.
Welcome!
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?
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.
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
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!
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
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)
}
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!
Correction: *I use a chevron not a button
Hey Eleftheria!
To make it closed by default, go under Advanced > Responsive > hide for desktop, tablet and mobile!
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 🙂
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...
Thanks! it works perfect 😉
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?
ok i figured it out - because I had gallery widget it messed up the hidden section
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();
});
});
});
Hey Steven! Yes, please email me at maxime@element.how . This would fall under custom work though! Definitely not a common scenario. I will share my rates in private.
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"?
I had figured out if you use the widget "gallery" instead of "photo gallery" It works as intended.
Thanks, Todd
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/)
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!
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!
Thank you Manuel for sharing this!
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!
Sorry... INNER SECTION as a button to show the shortcode below 😀
TANKS AGAIN!
Yes, that won't work with the design here... for this, use that code instead, and give your inner section the class 'showme'!
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!
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'.
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
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!
I don't know... I would need to see your test page!
Hi Maxime thanks for great content.
I've created a page with many section in order to show it as accordion tab.
But the problem is that there are sections that needs more then 3 click in order to show the content.
This tab are correctly opened and after short time were be closed.
You can see an example here -> https://wearemarketers.net/single-user/2/user-profile/
Why this happend?
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.
I put the code only once! Where ddo you see the second one?
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!
Great Maxime works fine! Thanks for all man!
Thanks Francesco!
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?
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.
It doesn't work for me. Just nothing happens.
Hello, thanks for the code! I wonder if hiding sections containing some content would affect the SEO of the page negatively.
Don't worry about it. Learn more about this here. Read it all.
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.
Yes, that's a use case where the code won't work...
Hi, I'm having trouble getting this to work in a Popup. Is that not supported?
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!
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!
Just realized me message wasn't fully visible.. I updated, please check my comment above and let me know if that works!
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.
Hello how do i make a default section open?
Sorry I'm not certain what you mean?
Hello, thank you for this great piece of code!
Is there a way to make a section closing when another is being opened?
Angelo.
Hey!
Yes. Simply add this line:
Right below the very similar line that's already there:
Then, the two sections following the trigger will toggle visibility. You can hide one of them by default, to switch in between them.
Hi Maxime! Your solution was exactly what I was looking for, thanks!
One question: instead of rotating, how can I replace the icon when the corresponding section is open? I'd like to turn a menu burger icon into an X icon.
Best,
Paulo
Hi Maxime, this wonderful script works great on Sections but not on Inner Sections. Does the code need updating possibly?
Hi Maxime, thank you for this code. works good for the most part! would appreciate if you could give me some hints on how to make the script only appearing for Mobile and Tablets. i want to hide it completely on desktop. the issue is that when i click to show the sections on small sized window and i dont click it again to hide it, and then resize the window back to full screen, the section is still there, even if its suposed to be hidden in desktop view. ( note that the section is hidden for desktop portview in elementor, of course.) i tried to find a jquery that would allow me to only run the script for certain screen sizes, but havent been able to find anything.. i hope you can understand what i mean?
sorry if im being needy, i ve spent literally a whole day fiddling with this, and im geting desperate hehe.
take care
Hi Maxime,
Great tutorial!
I'm struggling to display all inner sections (4 in total) underneath the icon with one click and collapsing them with the close button.
I've read through your comments and found a possible solution where this modified script seems to be what I'm looking for (below) but it's not working for me.
Please can you guide me on what's going wrong,
Thanks
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;
}
});
});
});
.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);
}
Great article very happy 🙂
Welcome!
Hi. It works with the new containers?
Hey Raul! Here is the code for the new containers. You will have to give the class name toggle-slide-container to the container you want to toggle on click of the button.
Hi Maxime, thank you for great content, much appreciated!
I just tried this code for Containers but was wondering if it is possible to tweak the code so it's behaving like the original Code, meaning that the button will only show/hide the container right below it. Because now both my containers open at the same time 🙂
All the best, Tone
Hey Tone!
I updated the tutorial with the code for the containers. It's closer to the original code for the sections, however the new container code will disregard any inner container. It will only toggle first level containers, which in most cases is what people are looking for.
At some point I will come out with a more advanced tutorial with very granular controls for this kind of design...
Cheers!
Hey Maxime,
Thank you for your incredible work that is so helpful to so many!
I tried to use the new procedure for the container but it seems i m a bit confused.
- First i need to create a container with copy/past the code above into a HTML widget?
- Second, i need to create a container right below the container that contains my button/icon? Question : is it in the CSS class of that container that i need to add " toggle-slide-container" ?
- Third, i need to to add "showme" in the CSS class of the mentionned button/icon ?
Am i missing something or doing something wrong?
Your name sounds french so i ll risk a "merci beaucoup et d'avance pour ton aide!"
Bien à toi ,
Update : it works, i had not refreshed my page in my browser! Thanks again!
Welcome Mag!
Hello Maxime! Thanks for your work.
I have a question, I run the HTML code with a button so that a section opens.
But when I click on the button again, the section closes.
How can we make it so that once the section is open, it is open all the time?
Hey Julie!
To do this, change
slideToggle()
to
slideDown()
in the code.
Also change
toggleClass
to
addClass
And then it should work as you want!
Cheers!
Nice it's working, thanks!
Hi Maxime! Thanks for this code. But I do have a question though.
Is there a way to save the last event? For example if click on the button and it shows the section then after I refresh the page, is there a way to keep it that way?
Hope to hear from you. Thanks!
Hi Maxime,
It works great! But unfortunately when i use the button and empty the link field, the button is not selectable using tab / shift tab for accessibillty. Is there a way to fix this?
Thanks!
Hey Ruben!
Great question. Yes indeed it is possible. I have updated the code provided in the tutorial to allow having a "#" in the link field to keep the inherent accessibility features of <a> elements in place.
Cheers!
Hi Maxime,
I'm seeing a repeatable bug in the end result using the show/hide section and I'm having trouble figuring out a solution despite knowing the cause. Apologies if this has already been discussed in the huge number of responses.
The section I am revealing with the button is first displayed offset by half a screen width to the right. As soon as I resize the browser(Chrome) slightly, the section immediately centers correctly. From then on the section open and closes centered.
But if I refresh the browser, the first reveal is once again offset to the right by half a screen width.
I believe it something to do with this section being stretched to full page width using the 'Stretch Section' toggle in the layout options. I know this because if I turn this stretch section option off, the problem disappears.
Any ideas how I can choose to use this 'stretch section' option but have the revealed content remain centered upon first look?
Any help appreciated.
Thanks in advance.
I found a solution. The WP theme was causing the issue. When I set the page to Elementor Full Width, the issue is fixed.
Thanks
Great, glad you managed!
Hi Maxime/others,
I am new to Elementor, and I have been looking at many of the answers above, but I don't seem to find what I need help with.
I am creating a portfolio (3 projects per row, many rows), and the idea is that when you click on one project "A", below a section opens displaying the images and the text related to "A". If you press any of the other 2 projects (let's say "C"), "A" closes and in the same place the section for "C" opens.
And this happens on each row (projects D to F, G to I, etc).
I believe I need to create a section for each project, but what CSS ID and CLASS shall I use? Do I need to create an HTML code for each section?
By the way, I am no coding programmer.
Thank you in advance.
Hey Ali!
I understand exactly what you are looking for... I coded something similar for a client here: https://web.archive.org/web/20200807205330/https://www.travelandtransport.com/our-people/
It's a more complex design that requires very specific code and setup, out of scope for this current tutorial. However I will likely make a premium tutorial at some point about replicating this kind of design. Stay tuned! If you need this sooner, you may reach out to me for custom work.
Cheers!
Hi Maxime,
Thanks so much, I've been able to add it to my site successfully.
I have added this as a search bar that appears on click in a sticky header on mobile view only. The problem I'm having currently is that the hidden section doesn't stick with the header section (despite section being set as sticky) on scroll. So when I've scrolled down and click the search button, the hidden section opens back at the top of the screen. I hope that makes sense...
Is there a solution for this?
I'm so lucky to find your website & thank you for this amazing tutorial. Btw, can I make a 'read less" button at the end of the content while still keep 'read more' button at the beginning?
Hey Tuans!
Yes certainly, as written in the tutorial: if you want a close button in one of the expanded section, simply give it the class 'closebutton'.
Cheers!
Hello Maxime
Thank you so much for this awesome tutorial. I just added it with a button but for some reason it doesn't work for me. Not sure if I am missing anything or a step?
Added the 'showme' class to the button, added the html element with the code for containers (as I have containers enabled) and hid the container with the 'hidden' content. Nothing happens when I click on the button.
https://stierli-architekt.colorit.ch/projekte/bremgarten-wohnhaus
The button is the '-> Projekt Daten' about half way down the page.
Hey Corina!
I had a look and I can see that your containers are all within a single parent container... the code won't work in that way. The container that you want to be expandable and collapsible needs to be 'first level' and not within another container for this to work.
If you can't change your layout, use this tutorial instead, it will work: https://element.how/elementor-premium-expand-collapse-toggle/
Cheers!
Hello Maxime
Thanks heaps. I purchased the tutorial and implemented it, but when I click on it, it opens the container more but it also jumps to the top of the page.
Also, I set it to not preview any text (ie 0px) but it still shows a preview.
https://stierli-architekt.colorit.ch/projekte/bremgarten-wohnhaus/
Appreciate any additional input.
Cheers,
Greetings Corina,
Thank you for the purchase.
I updated the code to prevent the scrolling back up to the top of the page, please import the code again.
For the preview, please set the padding top and bottom on your container to 0. Add top and bottom padding to the element within the container to replicate the same layout.
Let me know if that all works!
Cheers!
Thanks heaps Maxine
For some reason, it now no longer works. I did the following
— Added code from Tutorial (I assume updated version as today's date)
— Removed the padding from the container
— Cleared the cache
It is now not hiding the content at all and still jumps to the top of the page when clicking on the button.
https://stierli-architekt.colorit.ch/projekte/bremgarten-wohnhaus/
Thank you.
There is a small error in the code you modified, you have :
let defaultPreviewHeight = 0px";
Should be
let defaultPreviewHeight = "0px";
Cheers!
AWESOME and so superfast. Thanks so much Maxine.
Question. Is it possible to have several of these show/hide containers on one page? My client might want a second one.
Thanks and truly appreciate your help.
Cheers,
please disregard my question... all good and massive thanks for your help.
all the best,
Welcome Corina!
Hi there,
Thanks for the helpful article. Is it possible to hide/ restrict some of the content (a section or a few sections) and show it after a form submission? Very similar to the effect you are using for your code snippets, however instead of login to be shown after form submission.
Couldn't find such tutorial. If you have a solution somewhere I'd be super super thankful to see it.
Thanks so much!
Greetings Rumyana!
Try with the following tutorial, and a redirection on the form submit! Add the proper ?query=url to the page on redirection.
https://element.how/elementor-show-hide-anything-based-on-url/
Cheers!
Hello Maxime,
really great stuff!
Havig a problem with "image-carousel" - it does not work in a hidden container 🙁
and the "closebutto" leads to top of the page and not to the top of the hidden container.
Any advice how to fix it?
Many thanks i advance!
wbr
anton
Hello Anton,
You will have to show it by default. Otherwise the JS calculations can't be made if it's set to display:none; .
I updated the code to fix the issue with the closebutton.
Cheers!
Hello Maxime,
thanks for the quick reaction.
The updated code for the button works fine in Firefox, "image-carousel" works with FF too.
In Chrome and Edge clickon button still leads to top of the page, the carousel does not appear in correct size and does not work eventhough the same code as in FF is used.
You may check it out on https://www.xn--knigspudel-ecb.at/_tester_00/.
Sorry for late reaction, but I wanted to test correctly, thats the reason for delay.
Hope I ca help you by improving your greate app.
Very best regards!
anton
Hello Maxime,
after along while of waiting the carousel started in both Chrome and Edge.
Misterious, is'nt it?
wbr
anton
You are a mind reader. this is exactly what I was after. Thank you so much
Hi Maxime,
great tutorial but it would be bestest of all if it would allow text of 'ToggleElem' button to change ( https://c2n.me/4ioQrAt.png ), e.g. 'more' to 'less' etc. It would be right for good UX. Thanks.
Hey Alex!
I dont' think I will add this to the current tutorial... as I give the option to use any element as trigger, and for UX we have the icon rotation...
However, I have a similar premium tutorial that is more feature rich where you can also change the text: https://element.how/elementor-premium-expand-collapse-toggle/
Cheers!
Hi Maxime, great tutorial, as always!
I tried to adapt this code to a situation I need but without success.
The idea is to have a button that opens more buttons when clicked (with anchor links to the page) and I would like that when you click on one of those secondary buttons, besides navigating to the anchor on the page, closes the content as it was at the beginning.
I did the tutorial and tried to put a button on the content that appears hidden with toggleClose, but when it's inside the hidden content, it doesn't work.
This idea is because this block will float/sticky on the page and only be opened when the user wants to choose a link to another area of the page.
Is it some limitation of the code because it's inside the hidden content?
Is there a way to keep it inside (because I need the anchor links), but still be able to trigger the toggleClose trigger while navigating to the link?
Greetings!
Try changing this code:
closer.addEventListener('click', function (e) {
e.preventDefault();
toggles[i].classList.remove('toggleIsActive');
jQuery(contents[i]).slideUp();
});
to
closer.addEventListener('click', function (e) {
e.preventDefault();
toggles.forEach(toggle => toggle.classList.remove('toggleIsActive'));
jQuery(contents).slideUp();
});
you will need the toggleClose class on your anchor buttons!
Cheers!
Hi, and thanks for the fast response.
I changed the code as you indicated, but the "toggleClose" button is still visible even if you place it inside the "toggleContent" section, and in this case not even the "toggleElem" button works by opening the hidden section.
That is, both buttons are visible and neither of them does anything.
Hello Maxime,
I confirm, your code works like a charm: thank you very much for your tutorial!
My level of knowledge in jQuery being minimal, I have a small question: is it possible, and if so, what should be added to the code to allow the opening of a single "toggleContent"? That is, if I interpret your code correctly, that when clicking on "Open", the other "toggleContent" lose their "toggleIsActive" class?
A little clarification: I don't use any "closing" button.
On that note, to answer alexschneiderru's request, it is quite easy to change the text of a single button using css classes. The idea is to :
1 - Add a generic text to the button - "Open / Close" for example - and set the css to font-size: 0px;
2 - Use the pseudo CSS element ":before" by associating it with the active state of the button, i.e. :
For the text of the inactive button :
.elementor-widget-button.toggleIsSetup .elementor-button-text:before {content: "Open";}
For the text of the active button :
.elementor-widget-button.toggleIsActive .elementor-button-text:before {content: "Close";}
Adapting it to the actual structure you are using of course...
3 - Assign CSS rules to the pseudo ":before" element.
.elementor-widget-button .elementor-button-text:before {
color: #000;
font-size: 16px;}
or, by distinguishing the two states :
.elementor-widget-button.toggleIsSetup .elementor-button-text:before {
color: #000;
font-size: 16px;}
.elementor-widget-button.toggleIsActive .elementor-button-text:before {
color: red;}
Hoping this will help, without overshadowing Maxime of course 🙂
Best regards!
Hey Raphael!
Thanks for sharing the CSS to change the text content. It's a good idea.
I could also build the option in the JS and with an attribute, however I like to keep the free tutorials simple, and this one is complex enough already! But now the adventurous users will be able to use the CSS you provided. Thanks!
Regarding your question, change these two lines:
toggle.classList.toggle('toggleIsActive');
jQuery(contents[i]).slideToggle();
to
jQuery(toggles).not(toggle).removeClass('toggleIsActive');
toggle.classList.toggle('toggleIsActive');
jQuery(contents).not(contents[i]).slideUp();
jQuery(contents[i]).slideToggle();
Cheers!
You're welcome: it's normal and logical to participate a little... according to our means of course =) . You're right to keep the free tutorials simple, an opportunity to thank you again by the way. For the rest, it definitely works like a charm: thanks a lot Maxime ! 😉
Cheers and best regards !
Hi Maxime,
First of all, thank you for this fantastic piece of code! This really provided me with great opportunities in design. I now have one thing which goes a bit beyond this part but would still be amazing to implement in my site. As a navigation to my one-page site which is split into 5 foldable containers that open and close with your code I'm using elementor pop up as a sticky slide navigation: https://elementor.com/blog/how-to-create-sticky-sidebar-menu/
Hence there is a toggle on the right side always visible and when I click it a navigation bar enters from the right side. There is the whole menu visible which is exactly the structure of the 5 foldable containers which are linked to anchors in the main page. The navigation works very well if multiple containers on the site are "folded open" but of course, it does not work in such a way that when I'm clicking on the navigation it also directly opens the container I clicked on. This would be amazing to have and hence I wanted to ask you if there is an easy way to implement this. I imagen that there would need to be some code that links the navigation (at this point just titles that are linked to anchors on the site) with the main page telling it to open a specific section. Could you help me with this?
Thank you very much and all the best,
Jan
To readers: I helped Jan in private as this was out of scope of the current tutorial, and getting quite technical and specific.
Thank you for your excellent work Maxime!
The solution is tailor-made to what I needed and delivered extremely fast. I can recommend to everyone to use the service and for everyone wanting to learn coding you also get great explanations for what the effects of the code are on the page.
Hi Maxime,
I have used this tutorial before and it works great but trying it now on a site using containers I can't save the page with the code added. The page saves when I delete the code. Does it have to be in the page? Can I add it somewhere else?
Thanks for your work in helping us all build better sites!
Geraldine
Hey Geraldine!
Are you logged in as an admin? And if so, do you have any security plugin on that site, like WordFence? If you do try placing it in "learning mode" while you are updating the page with the code.
Cheers!
Hi,
Yes, logged in as Admin, have disabled Siteground Security and don't have Wordfence.
The page saves ok without the code block added but when I add the code I get a 403 error.
Geraldine
Hi Maxime, I couldn't reply to your reply above so I'm posting a new comment - THANK YOU SO MUCH - this is so super useful, I appreciate your help and this code very much. Thanks again 🙂
Welcome!
Hi there Maxime, I have purchased the template, thank you this is exactly what I am after! However, I have around 10 different sections to toggle, do I need a specific toggleContent and toggleElement for each? eg. toggleContent1
Hey!
No, you don't duplicate the code or the class names (and then add 1 2 3 etc).
The code will automatically loop through the page and match every toggleElem and toggleContent class elements together, based on the index.
Meaning, the very first toggleElem on the page will open the very first toggleContent element on the page, and so on.
For that reason, you need to have exactly as many of each other.
Hope this helps
Cheers!
Hi Maxime, thank you for getting back to me on this, I am still seemingly running into an issue which is odd - on my page the first container for example has 4 items
they are supposed to open up each container underneath (each labelled with the toggle class)
When I click open on the first, it opens both the first and second container - and when I click on the second element box the last 2 containers open together (3 & 4 sections are redundant (nothing happens on click)
I have been through it a few times and checked classes etc, no links on the images and can't work out where I am going wrong
Hey Kelly!
This might happen when you have a toggleElem class element within another toggleElem class element.
This situation needs to be avoided.
So look at all your elements, and if any parent element or a toggleElem also has the toggleElem class, remove it.
If that doesn't seem to be the issue, please share your URL with me I will check.
Cheers!
Fantastic explanation and tutorial.
Is it also possible to apply this to any other element? Now I think it's about the element that comes exactly after it, but suppose I want a container that is further down the page, is that possible?
Yes it is! It works out of the box for this. Just give the proper class names to the elements you want to interact with each other.
Cheers!
Hello, thanks very much for this. I'm completely new to this, and followed the directions wholesale (copied the code exactly) within a popup (and without the close element). It does hide the toggleContent, but clicking the button labeled with "toggleElem" doesn't show any content, it just redirects the page to link/#.
Is there a part of the code I need to delete to make sure it works in a popup?
Greetings,
Looking all over to see if anyone had issues with mobile. For me on mobile it doesn't work.
I had conditional logic on so that caused me not to see effects on my mobile.
I have another issue: How do I get the section/container on reveal scroll to viewpoint? Currently my toggle button is at the almost bottom of page and when the section opens, users will have to manually scroll down to see content.
Hey Roualc!
Simply add anchors, like I have done in one of my examples above. It will automatically scroll to the anchor.
Cheers!
I've done my best to add the code exactly like the tutorial, but when I click the button, it just goes to the top of the page and doesn't open the hidden container.
I think I've added the anchors correctly, but I also haven't gotten far enough to see if each button will open the correct container as even the first one won't open.
Also after I added the code, it seemed to have added bullet points to all my icon lists.
It's here: https://joshuac84.sg-host.com/financial-advisor-marketing/
Any ideas?
Greetings JCogar,
You have added the 'toggleElem' to the ID and not the class. Add it to the class please.
Cheers!
Perfect! Thank you. Can you tell me why they code seems to have added bullet points to the icon lists on the page? There were no bullets before adding the code.
Hi Maxime, first of all, thank you very much for this amazing code and tutorial! Wow how! Im doing my own webdesign and it looks amazing now with this ShowHide Containers. However I would love to know, if it is possibile, how to make it work on ipad and mobile response. Should I duplicate it and change something in the code? (just to clarify, containers in mobile+ipad looks like just fixed images.
Thank you in advance, I really love your work, and hope one day take your CSS course since i`m starting to do websites.
Kind regards,
Francesca
Greetings Francesca!
I don't understand your question... would you have a URL to share with me so that I can have a look?
What I show in this tutorial should work just fine on iPad and Mobile devices...
Cheers!
Hi maxime,
Thank you for your very soon answer, so happy to hear from you!
Yes, the url is this one: (page is under construction almost finish) https://artscapeagency.com/about-us/
In that section "about-us" I add the template as I download it from you. I didnt touch anything just to show you how it works on Ipad or Mobile. It looks the toogle bottom to open and hide the content works fine, but the image in the container is static, it dosent look like one conteiner cover the other one when you scroll down. (in desktop works perfectly as you show). So I dont know if this is something about Scrolling Effect to touch in the Tablet and Mobile Portrait.
Also I add the code in the Home page, but there dosent work, I thing is my mistake, I will check again.
Thank you in advance,
kind regards
Francesca
Hey Francesca!
Now I understand. Here is what you want: https://element.how/elementor-background-fixed-mobile/
Cheers!
Hey Maxime! Firstly, thank you so much for this tutorial. It's so well written and flexible and I've found so many different ways to use it. Love your work.
Quick question if you have some time to assist - would it be possible to have the 'first' set of toggleContent visible on the page by default, and the remainder hidden?
The context for this is a vertical two-column list with the toggleElem's in the left column with toggleContent's in the right. By default, the right column is completely empty on page load, but I'd like it to be displaying the 'first' toggleContent.
Thanks again!
Greetings Will!
For this simply add this line:
Right here:
Cheers!
Thank you so much Maxime, this worked perfectly! 😀
Great material! And so easy to apply... thanks for creating this! Blessings from Argentina
Thank you for the kind words Virginia!
Hello Maxime, thanks for sharing this tutorial really helpful. I have used this functionality to a crocoblock jetsmart filter where I can easily toggle expand /collapse the filtering tab. Is there a way that I can associate the javascript toggle function to an Apply filter button from Crocoblock? Here's what I am trying to achieve - https://share.zight(dot)com/llu8q1A7, this image will explain it better. Basically when a user already selected the filters, and once they hit the apply filter button the toggle js function will trigger and will collapse the filter section (hide it). Thank you so much.
Hi Maxime! Hope you're keeping well.
I'm trying to apply the code to containers within a popup, but unfortunately it's just not working at all. However, when the exact same container is pasted to a regular page (not a popup) it works fine.
Is there anything that can be done to allow this to work within popups again?
Thank you kindly for your help.
Hey Will!
The code needs to be on the page, not in the popup, for this to work with popups. If you have a popup across your website, you could have the code in your footer template for example.
If that's what you have, and it's still not working, could you please share your page with me (and let me know where I can toggle the popup) with the code in place, I will have a look.
Cheers!
Thanks heaps for your response Maxime. Unfortunately, placing the code on the page does not fix the issue. I've prepared these pages for you to take a look at when you have time:
https://www.vaulta.com.au/popup-test/
This is a page with the functionality as I'd like it to work: click the button to trigger the popup, then click the Yes / No buttons to display the appropriate toggleContent container. As you can see, the toggleContent containers are hidden, but do not toggle after clicking the toggleElem buttons.
To compare, I've prepared this page as well:
https://www.vaulta.com.au/popup-test-2/
This page contains literally the exact duplicated containers from the popup on the page itself, which is working as intended.
It's a weird one! Thank you again for any help you can offer. Love your work.
Hi Maxime,
Thanks for this tutorial! I don't know why, but it works fine in my pop-up in editing mode. But when I look at it on the page itself it doesn't work. Maybe you can have a look with me?
I'm working on https://bertvonk.nomeevisuals.com/ where I use the code in the menu-popup 'Portfolio'.
Would be great, thanks!
Hey Joelle!
Let's try this. First, remove the HTML element that you have in the popup, keep only the one on the page.
In that one, change the javascript part to this:
Let me know if that works!
Cheers!
Thank you for thinking with me so quick!
Crap! That doesn't do the job either. I also tried to change the Classes because I thought maybe it's because of the same Class in the page itself. So strange it works in editing mode. I should learn to code hahaha
Greetings Joelle!
You have the code twice on the page... delete one of them please, and verify that the other one is the updated code I just shared.
Let me know how it goes!~
Hi Maxime,
Sorry, this project has been on hold due to the holidays. Unfortunately, removing the duplicate from the website did not help. No idea why it works in editing mode but not on the site itself.
Can you confirm you also changed the javascript to what I sent?
Hey Joelle!
I have updated the code in the tutorial, please import it again and now it should work just fine in the popup!
Cheers!
Hello hello and thank you for your amazing tutorials.
there is any option to always displaying some of the toggle content, like min-height: 60px;?
I have long questions and answers, and I want to always display the first two lines of the question.
thank you!
Greetings!
No sorry this isn't possible with the current tutorial.
However, it is possible with this premium tutorial here: https://element.how/elementor-premium-expand-collapse-toggle/
Cheers!
This did not work for me... I imagine the Elementor settings have been updated since this was posted, rendering this defunct. Is there an updated tutorial for 2024?
Hey Joseph!
This is working with the latest version of Elementor, as you can see in the live demos above (which runs on 3.19.x)
Cheers!
Hi Maxime,
I've attempted to use this code for a preexisting button on a website to reveal a video beneath it, but each time I select the button, the page refreshes, and nothing happens. I've followed the instructions and have just given up at this point and will be redirecting people to YouTube.
Thanks,
Joseph
Hej, thank you for providing the code 🙂 unfortunatly it isn´t working for me. I am new to this field... it just always jumps to the beginning of the page, when i press a button and everything is still visible and not hidden. i tried to follow your instruction. Thanks in advance!
Greetings Ruthbie,
Please try importing the templates files you should have received by email when signing up for Element.how.
That will get you a working starting point to work from.
Cheers!
Hi, thanks for your great code. Unfortunately it doesn't work properly with the new elementor taxonomy filter. I have created an elementor loop and in each loop post I want to show and hide a text field. It works as long as I don't click the loop filter. As soon as I click on the filter and the posts are rearranged, all text fields are open. When I click on the toggleElem element, the page immediately scrolls up. After reloading the page it starts again from the beginning. Can you tell how I can fix this? This is the page: https://dr-christina-brunner.com/schoenheitschirurgin
Cheers!
Greetings Mareike!
Add this code, directly above the line /* compatibility for Elementor popups */
Let me know if that works!
Cheers!
thanks but sorry, I am not sure where to put the code exactly.
Add it in the same HTML element, directly above the line
/* compatibility for Elementor popups */
Please add the code again, I will have a look with it in place.
Hey Maxime, unfortunaltely your code isn't working. Actually the show/hide effect isn't working at all anymore.
Any other ideas? Thanks in advance 🙂
Cheers Mareike
I'm sorry for the inconvenience. I used the wrong code. I just noticed that. Now it works perfectly. Thank you for your incredibly fast and competent help. I would not have expected this.
Kind regards, Mareike
Welcome Mareike!
Hello!
Thanks for this code. I'm trying to get each button to close the other content when it opens the one it's connected to. Right now, when you click one and then the other both sections stay open.
https://dccclinical.hardyhar.co.uk/home/?preview_id=9&preview_nonce=1dc852f4ad&preview=true
Any thoughts?
Thanks!
Greetings aviation!
See the part of the tutorial called "Making it an accordion"
Cheers!
oooh I thought accordions were only vertical! thanks!!
hi again!
is there a way to make the transition instant instead of gradual?
thanks!
Greetings Aviation!
Yes, change slideUp(); to hide(); and change slideToggle(); to toggle();
Cheers!
gahhh ur the best
❤️
Hi Maxime,
Thanks for the code. I have an issue with the code: the buttons don't work on Iphone (work great on other devices). Is there a fix for that?
The page (to test): https://lifevideogame.com/stats-final/
Thanks
Greetings!
It looks like a bug from the Elementor preloader... it's covering your whole page, you can't click the button, or anything else really.
Add this CSS to fix this (or get rid of the preloader):
e-page-transition {
pointer-events: none;
}
Cheers!
hello again,
is there a way to make it so that the buttons only open the accordion, but don't close it? as in, I'd like it so that after you click the button to open the section, when you click that same button again it does nothing at all (but the not-active buttons still work).
Thanks!
wait don't worry I figured it out! thanks!
Hey Aviation!
Alright, glad you managed! Cheers!
Thank you for the code and tutorial. Worked very well! However, is there a way to get rid of the "flash" upon page load?
My container is above the fold, and its very noticeable on my website that for a micro-second you can see the hidden section.
Hey Amy!
Indeed that will happen if your hidden section is above the fold.
Try this. Replace this line:
document.addEventListener('DOMContentLoaded', function () {
with this:
(function(){
and then, on the line just before the closing </script> tag, replace this:
});
with this:
}());
After these changes are made, move the HTML element to be directly after (or even within) the lowest .toggleContent element on your page.
Cheers!
Thank you so much! That worked. Much appreciated 🙂
Welcome!~
Hi Maxime,
I'm using this beautiful script. I'm using the standard version, no accordion or close buttons. But is it possible to show the first toggleContent as visible on page load? So people can see there is information hidden on the page?
Kind Regards,
Pucoo
Greetings!
Yes it's possible, please see this comment: https://element.how/elementor-show-hide-section/#comment-18367
Cheers!
Amazing, works perfect!!
Welcome!
Hi Maxime,
Is it possible to show the content when you hover the trigger?
Greetings!
Yes. Change this
toggle.addEventListener('click', function (e) {
to this
toggle.addEventListener('mouseenter', function (e) {
Cheers!
Hi Maxime,
On our production site the effect worked perfect, now i've moved the website with WPVivid to the new live location but the JS doens't work anymore?
It's on karmalijn.nl on the homepage, you see there drops that should have the effect, with hiding the text underneath. Do i need to take some action after a move?
JS wasn't loaded correctly! Solved 🙂
Hi, how can I hide the toggleElem button after pressed?
Greetings!
Add this CSS:
.toggleElem.toggleIsActive {
display: none;
}
Cheers!
Hello, congratulations on the code! I added 3 toggles and would like to know if there's a way to keep the first one active? On my site, it didn't work to have all 3 hidden at the start. Thank you!
I found it here in the comments, thanks!
Hello and congratulations for your script!
If I want to show/hide divs but which are in different places on the page and there are others in between. How do I do it please?
Example: I have a button at the top of the page that shows/hides a container at the bottom of the page but in the middle I have other buttons that show and hide them too.
Thank You Brother. It Worked....