Elementor Hide Or Show Section On Button Click 👍👍👍
ฝัง
- เผยแพร่เมื่อ 15 ก.ย. 2024
- Elementor Page Builder how to create a button to show or hide a section on a single click. Today we will be demonstrating how to build a button using some HTML CSS and JS that will toggle a section to display or to be hidden. When a user clicks on the button it will reveal the section, onn second click it will hide the section.
This is very easy to do and is a great eye-catching feature to have on your website.
There is a little bit of coding involved today to build this feature. Don't let the CSS coding put you off, it is very easy, and any code I write today I will paste below the video for you to use as you wish. You are welcome to copy the code and paste it into your site, CSS is a great thing to learn, so I encourage you to try out some of your own ideas to get familiar with it. You can't break your site with CSS, if something doesn't work simply delete the code to return back to how the site was previously.
Elementor is a great free WordPress page builder plugin. There is a free version as well as a paid version of Elementor. In this series of videos, we will be building some great elements on our WordPress website with the Elementor free page builder plugin.
So, follow along with the video and check out how to create a button to show or hide a section on a single click using the free elementor page builder plugin.
For more information on Elementor, check out our Elementor playlists below.
Elementor Ecommerce Shop Site Build: / watch
v=Sl1Ye9XHhgY&list=PLqabIl8dx2wrrX3YsjpIEL8uq5LnSkrhA
My Elementor Video Playlist : / watch
v=yN6YlT1Cvqc&list=LLYeyetu9B2QYrHAjJ5umN1Q
Elementor Hover Effects Playlist: / playlist
list=PLqabIl8dx2wqkGuqlL4RRLwJnBRO47jm2
Get Elementor From Here: bit.ly/TryElem...
Check out our playlist page for more videos on this: / system22net
Download the code used from here: www.system22.n...
--------- RECOMMENDED PLAYLISTS ---------
Elementor Ecommerce Store: • Elementor Ecommerce St...
Divi Snippets: • Divi 4 Snippets Divi T...
Divi 4 Ecommerce Store: • Divi 4 Ecommerce Store...
Bootstrap 4 Basics: • Bootstrap 4 Basics Ind...
Elementor: • Elementor Wordpress Bu...
WordPress Tips: • Wordpress 2020 Theme C...
--------- RECOMMENDED VIDEOS: ---------
Bootstrap 4 Complete One Page Scrolling Website Tutorial : • Bootstrap 4 Complete O...
Elementor Wordpress Builder One Page Scrolling Site In 15 Minutes: • Elementor Wordpress Bu...
Bootstrap - How to edit a bootstrap template: • Bootstrap - How to edi...
Divi Add a live facebook feed to your divi or any wordpress website: • Divi Add a live facebo...
Divi 4 Theme How To Build A Multi Page Website In 20 Minutes: • Divi 4 Theme How To Bu...
Elementor Wordpress Builder How To Build A Parallax Section: • Elementor Wordpress Bu...
--------- SOCIAL MEDIA ---------
Follow what I'm doing on:
Facebook: / system22.net
Twitter: / 22itsolutions1
Linkedin: / jamie-henry-546b7377
Support the channel: paypal.me/syst...
Courses I teach: www.udemy.com/...
Subscribe: / @system22
#TH-camTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite
Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists
Sub: th-cam.com/channels/Yeyetu9B2QYrHAjJ5umN1Q.html
Thank you very much for your practical and useful tutorials. I am a beginner and I always use your videos and learn.
Glad to help @rj-sm1yo - Check out our Simple CSS playlist for more videos on this: th-cam.com/play/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL.html - Please like, share and subscribe if you have not done so already - Thanks!
How brilliant - thank you! I'm amazed this doesn't exist in Elementor by default yet.
Glad to help Blue Sky All Day Every Day - Check out our Elementor Ecommerce playlist for more videos like this: th-cam.com/video/Sl1Ye9XHhgY/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
Thanks. Surprising Elementor haven't built this function in yet
Glad to help Will Dobson - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
Exactly what I was looking for and super simple. Thanks so much. 👍
Glad to help Burner918 - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
Took me FOREVER to find a solution for MULTIPLE sections, I used the following coding, and changed the number after each function. This is my 2nd section:
BUTTON 2
.shbt {
background:blue;
transition-duration: .5s;
padding:15px 30px;
border-radius: 50px
}
.shbt:hover {
background:green;
text-decoration: none;
}
.shbt:focus {
text-decoration: none;
}
function myFunction2() {
var x = document.getElementById("sechide");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
So for your NEXT section, just change the number after the myFunction
Glad to help Gaston Gabarro - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
you are a LIFE SAVER!! thank you!
Will this script show hidden element 2 right below or do we have to scroll down pass the hidden element 1? Thanks!
A simpler way would be to add a variable to the function:
function myFunction( myid ) {
var x = document.getElementById( myid );
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Simply assign an ID to your section(s) and then use in the click event on the button:
See More
This will be shown/hidden
See More
This will be shown/hidden
See More
This will be shown/hidden
You only have to create a single function and simply change the id variable on the button to match the section id to show/hide.
Thnks. Awsome tutorial. This helps me a lot.
Glad to help @i-dreamgraphics7352 - Check out our Simple CSS playlist for more videos on this: th-cam.com/play/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL.html - Please like, share and subscribe if you have not done so already - Thanks!
YOU'RE THE BEST!!! SUPER SIMPLEEEEE ♥
Glad to help @LouOficial - Check out our Simple CSS playlist for more videos on this: th-cam.com/play/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL.html - Please like, share and subscribe if you have not done so already - Thanks!
Great... Helpful video. Thanks man 👍
Glad to help Shekhor Sarker - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
Super simple and what I needed. Thank you!
Glad to help Dan Casas-Murray - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
Thanks... this video has helped me a lot.....
Glad to help Nanao Meitei - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
Nice
Glad to help Trophy Developers Uganda Best Web Designers - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
It worked Thanks
Glad to help @user-cm3sk4ox2c - Check out our Simple CSS playlist for more videos on this: th-cam.com/play/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL.html - Please like, share and subscribe if you have not done so already - Thanks!
Thanks alot.
Glad to help @hassanali863 - Check out our Simple CSS playlist for more videos on this: th-cam.com/play/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL.html - Please like, share and subscribe if you have not done so already - Thanks!
Thanks
Glad to help @Flabis - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
Hey the tutorial was awesome. However, I am trying to show a whole page of sections. I tried making all the sections with the same CSSID but it doesn't seem to show any of the content. Any help would be great thanks.
Glad to help Josh Miller - You can't have multiple sections with the same IDs, you can make those sections into full width rows, then put the rows all in one section and give it that ID. That should work - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
I have tried this so many times. It does not work for me. I want to do two galleries under each one. When I add the code, both sections only open/close one gallery. what am I doing wrong?
Glad to help @DianaSmythPhotography-nx2yt - You need to have different function names and css ids for each gallery - Check out our Simple CSS playlist for more videos on this: th-cam.com/play/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL.html - Please like, share and subscribe if you have not done so already - Thanks!
Hi, thanks for your video it has been really usefull. I was wondering what we could add in the code to make auto-scroll and put the hidden section at the center of screen when showing the section.
I have an image and I want that when you click it, a section shows up. How do we do that? Please help, it's actually urgent.
Glad to help Originality Maze. TV - Supreme Modules is great for that sort of thing, have a look at this video on it: th-cam.com/video/5qFCdwaHIqU/w-d-xo.html
Check out our Supreme Modules playlist page for more videos on this: th-cam.com/video/ZAO2MH0dQtk/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
@@System22 I'll look into the mentioned link. Thank you so much for your help! Consider me as your subscriber. :)
Awesome!
Very nice. Well done. It would be nice if the button text changed to Show Less after it is clicked. How would you do that?
I'll look into it when I can Steven Greenbaum - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
brilliant solution.. is there any idea to make 3 different buttons for 3 different sections.. and then if I active and unhide one.. then second will trigger open the 2nd hidden section but also close the 1st "active" one? any idea?
I'll look into it when I can @wojtechwk - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
When I use this code to hide a section with multiple containers, unfortunately the appearance of my section is destroyed when I click the button. Any ideas how to fix it?
Hard to tell without looking at it!
thank you so much for this simple tutorial. is there any way to change button text to show to less afer click on it?
Glad to help @ronniejamesdio6350 - Sure, take a look at this videoL th-cam.com/video/Fu2jLfgSA9U/w-d-xo.html - Check out our Simple CSS playlist for more videos on this: th-cam.com/play/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL.html - Please like, share and subscribe if you have not done so already - Thanks!
Hi. Thanks for the great tutorial! I really appreciate it! I'm trying to animate display: block, but apparently display block has animation disabled on css 3. Do you have any tips on how to achieve that? Thanks again for the tutorial
I'll look into it when I can Patriot - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
@@System22 thanks.
i try to use this code to hide a section with multiple containrs. Unfortunately my sections layout is detroyed when I click the button, How can I fix that?
Not sure why that is @user-jc2cx6yn2o - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
I have 3 sections and for all I have given different IDs but only one is showing with every 3 buttons.... I want to show 3 sections with 3 buttons in single page how can I do that
Glad to help @arifaarif172 - This video should help you: th-cam.com/video/yd-wGkDqjUo/w-d-xo.html Check out our Simple CSS playlist for more videos on this: th-cam.com/play/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL.html - Please like, share and subscribe if you have not done so already - Thanks!
thanks a lot for this tutorial. Just want to know why i get the curser point on mouse hover without the hand icon.
Glad to help @AnneNicholas71 - You can add cursor:pointer; to your button css to cahnge it - Check out our Simple CSS playlist for more videos on this: th-cam.com/play/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL.html - Please like, share and subscribe if you have not done so already - Thanks!
Thank you so much, its working @@System22
Heeeey, I was super happy with the results but I tested the page and I have another problem 😢.
I did this to hide/show the comments of a post in a listing. So when I click on the button, it hide/show only the first listing item 😭.
Is it possible to make it relationed to each post?
I'll look into it when I can @brendonweiss7578 - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
Is there any way to add an arrow next to the button and change it up and down after clicking?
I'll look into it when I can @Khangdz99 - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
Hello, I was wondering if you also know how to make a button that will appear after [x minutes]? Thanks for your help. This will be for elementor buttons.
Glad to help Juan Martinez - I have just done a video about this using the Divi theme. The code will be exctly the same for Elementor : th-cam.com/video/LKM4InlReto/w-d-xo.html - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
thanks for this tutorial, But it never worked for me even after so many hours of trial. How can i do this for multiple buttons which are inline side by side to displacy different sections of my website when i click on them
Might want to try again @godwinonah6847 - Mine is still working fine! For more instances on the same page, just use a different function name and CSS ID for each. - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
Great Video, but can you also help in the code to change the button text. i.e Initially it should either say "see more" or "read more" and when clicked the next section should be displayed as shown in video + the button text should change to "Read less" or "see less" or "hide" and vice versa
Can you help me with that?
I'll look into it when I can Jackson Pathilchirayil - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
You can add smooth fade animation with this code :
See More
.shbt {
background:blue;
transition-duration: .5s;
padding:15px 30px;
border-radius: 50px
}
.shbt:hover {
background:green;
text-decoration: none;
}
.shbt:focus {
text-decoration: none;
}
#sechide {
display:none;
animation: fadein 2s;
}
.secshow {
display:block !important;
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
function myFunction() {
var element = document.getElementById("sechide");
element.classList.toggle("secshow");
}
Great tip FooFoot - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
How can I hide the button after clicking it, so that it appears when the section is hidden and disappears after being clicked.
I'll look into it when I can Toasin Islam - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
likes and subed
Awesome!
is is possible to do the same thing on a timer? or after they click to watch a video? in the free version @@System22
Hello Sir On Which Section you have Used class(secshow) Please share time stamp i cant find that.
Glad to help @abhishekgarg1030 - You don't apply that to any section, the JS code applies it for you! - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
Great tutorial! How can I center the button horizontally? I tried adding text-align: center; into the body, but it doesn't affect it at all.
Glad to help Okie Dokie - try adding this CSS: margin-left:50%; transform: translate(-50%); - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
I would be nice for you to share the code as a blog post. For easy Copy and paste
I'll look into it when I can empire boss - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
how to show/hide section from menu item? its possible?
Glad to help @_wargasipil - Just create a custom header and add the button to it. You can style the button to look like the rest of the menu text if you need to! - Check out our Simple CSS playlist for more videos on this: th-cam.com/play/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL.html - Please like, share and subscribe if you have not done so already - Thanks!
Thanks, but button dissapers after first click. Dont you know why?
Glad to help Joseph Cloude - Sounds like you may have your CSS classes mixed up! Just a guess, hard to tell without looking! - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
hello, tried this and it works but when I put this in many section of my homepage, its not working.
Not sure why that is Mohammed Rafe - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
Yes please solution sir
Hi tried to use your code on multiple buttons on my website and I also changed the id and classes but all 3 buttons only show and hide one section my site although they have different ids and classes. Do you have any clues why this is?
Glad to help @user-tf2ei7zw3g - Make sure you have a unique function name for each alaso! Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
How can I simply make the button hide a section that wasn't already hidden?
Glad to help Katze - Try flipping the CSS around the other way! - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
hello thank you, what if you want to hide/show more than 1 section ?
Glad to help ndon85 - Here it is made with the Divi theme, the code should be the same for Elementor: th-cam.com/video/yd-wGkDqjUo/w-d-xo.html - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
add that sections class also
Can you make one like this but instead of hiding section it animates container out of screen?
I'll look into it when I can @mad7505 - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
thanks very much
for me the the section is hidden but the button is not making it reappear
i didnt do the styling part because i am happy with the default
can you see any error pleaase?
.shbt{}
#sechide {
display:none;
}
.secshow {
display:block !important;
}
Function myFunction() {
var element = document.getElementByld("sechide");
element.classList.toggle("secshow");
}
Might want to try again @KevsGuide - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
@@System22 I saw your download further down in the comments. Fixed it thanks.
Can you also make it jump to a section when the button is clicked?
Because with my page after you click the button you have to scroll down to see the section that is now revealed
I'll look into it when I can @KevsGuide
@@System22 I shortened the gap between containers so it's visible now.
Awesome!
Hi, is it possible to hide/show more than one section with the button?
Glad to help Šimon Salaj - Sure just give any sections you want to hide the same CSS id - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
Hi, Hi Jamie,
Many thanks for posting this video. I am new to elementor pro and i intend to use this code on my home page.
I used this code and just chagned the class name and other wise all the functions are similar.
However, i am using container instead of a section.
But this isn't working?
Please help.
WealthTech
.wtech
{
background-color: #1F83E1;
border-radius: 25px;
font-family:Tahoma;
font-size:20px;
color: white;
border-color:white;
}
.wtech:hover{
font-weight: 900;
background-color: #1F83E1;
}
#wtsec{
display: none;
}
.secshow{
display:block !important;
}
}
function myFunction(){
var element=document.getElementById("wtech");
element.classList.toggle("secshow");
}
where is the code snippet please?
Glad to help Rebecca Perry - I can't put the code directly below the video because of the pointy brackets, so, I have put them into a pdf file you can download from here: www.system22.net/show-on-click.pdf - Check out our Elementor hover effects playlist for more videos like this: th-cam.com/video/uacZtY0OS4s/w-d-xo.html - Please like, share and subscribe if you have not done so already - Thanks!
@@System22 awoem this worked
why this is not working ???...check and reply
Grade 1-2
.shbt{
background:blue;
transition-duration:.5s;
padding:15px 30px;
border-radius:50px;
text-emphasis-color: white;
}
.shbt:hover{
background:orange;
text-decoration:none;
text-decoration-color: white;
}
#.sechide{display:none};
.secshow{display:block !important};
function myFunction(){
var element = document.getElementById("sechide");
element.classList.toggle("secshow");
}
Might want to try again Reetu Sharma - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
You wrote "." after the hashtag, it might be that.
Hello, can u write the code?
Glad to help Fabiana Reis Santos / Cimento Frito - I can't put the code directly below the video because of the pointy brackets, so, I have put them into a pdf file you can download from here: www.system22.net/show-on-click.pdf - Check out our playlist page for more videos on this: th-cam.com/users/System22Netplaylists - Please like, share and subscribe if you have not done so already - Thanks!
@@System22 Thank you! The pdf is perfect :)
@@cimentofrito glad it helped!
@@System22 It works very well! But, I'm still having a doubt at this... If in the page there are more than one section to hide/show, using this code as a principle, Is there a way to hide others sections at the same time one appears?
Take a look at this video tp do that: th-cam.com/video/yd-wGkDqjUo/w-d-xo.html