Divi 4 Hide Or Show A Section On Button Click

[@cassiosiquara]

I want to like a thousand times, but I can't... so I leave this comment and subscribed. Amazing content, keep teaching!

[@System22]

Wow, thank you!

[@alepbr4749]

Love it!!!! Worked awesome. SOooo easy to follow and recreate. Thank you so much for creating this!

[@System22]

Glad to help Ale PBR - Please like, share and subscribe if you have not done so already - Thanks!

[@jozilljoy]

Thank you so much for this tutorial. However, I am having issues with this in tablet and mobile. For some reason, it isn't working on tab and mobile view. Am I missing something?

[@System22]

May have to double tap on tablet and mobile Jozill Joy Sosmena - Check out our playlist page for more videos on this: kzbin.infoplaylists - Please like, share and subscribe if you have not done so already - Thanks!

[@zrbx]

Thanks! You laid the foundation for what I needed to get done! Keep up the great work!

[@System22]

Glad to help zahir rahman - Please like, share and subscribe if you have not done so already - Thanks!

[@ghulamrasool-nw5hy]

thanks for the video, i want to do exact same trick but with the image , like some one click on image a section appears and re clicking it the section will disappear any suggestios how i can do that ?

[@System22]

Glad to help ghulam rasool - Youm may find this video useful: kzbin.info/www/bejne/gZzWnHSApcd2fq8 - Please like, share and subscribe if you have not done so already - Thanks!

[@reasonsfor1]

Just what I was looking for... suscribed!! I'm really looking to use an image as a button (button background doesn't work unless i enlarge the button to the size of the image) do you have a workaround for this?

[@System22]

Glad to help Jon Banthorpe - Might try background-size: cover; or contain CSS with your button.

[@MariaFerraro]

Awesome! How can I do if I have two buttons and when someone clics on the first but then on the second the first row hide to show only the second row. I mean, only show one of them, the last clicked. (It is a This or That option)

[@System22]

Might try using toggle JS Maria Ferraro - Check out our playlist page for more videos on this: kzbin.infoplaylists - Please like, share and subscribe if you have not done so already - Thanks!

[@porruolivier2916]

Great great tutorial. I build some website, always on Divi, always the need to adjust some features. This is a truly great tutorial : well explained, documented, step by step, slowly. Great congratulation, cheers from Italy.

[@System22]

Sono felice di aiutare Porru Olivier - Per favore, condividi e iscriviti se non l'hai già fatto - Grazie!

[@entheonsupport822]

Is it possible to put the button on one page and have it make changes on another page for all viewers?

[@System22]

Not that I Know of Entheon Support - Please like, share and subscribe if you have not done so already - Thanks!

[@khalilaizzatunnisa769]

Thanks for the tutorial. My question : Why the first time to show the element, we have to double click the button ?

[@System22]

Glad to help Khalila Izzatunnisa - Just the way the code works. Look down in the comments, a few people have suggested modifications to fix this. I haven't tried them yet, but there may be something that fixes that down there! - Please like, share and subscribe if you have not done so already - Thanks!

[@khalilaizzatunnisa769]

@@System22 Aha..yes.. already subscribe and like. Thanks ..

[@juliancronje5827]

It doesn't seem to work in the slider, even though I have been using the code you suggested, the button is still standard.

[@System22]

Glad to help Julian Cronje - May need to use !important to over ride the original styles, or hide the original button completely with display:none; Then put the html button code in the text box using the 'Text' not 'Visual' Tab - Please like, share and subscribe if you have not done so already - Thanks!

[@aleighamattison1098]

This is awesome, thanks! Quick question. If we wanted to add an h2 tag for search engine purposes, is this possible to add into the code/have work? Sorry if a silly question, starting out on this stuff.

[@System22]

Glad to help Aleigha Mattison - Yes you can try wrapping your button text in h2 tags - Please like, share and subscribe if you have not done so already - Thanks!

[@juliancronje5827]

The class part of the code didn't work after creating the elements in the inspect section on the page and after refreshing and pasting it in the CSS code of the theme options,the button is still standard!

[@System22]

Might want to try again Julian Cronje - Please like, share and subscribe if you have not done so already - Thanks!

[@LuccConstantin]

Hey, thank you for your solution. I also added my tweak. Click only once on the button to reveal the section (row). I added this code: function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } }

[@System22]

Awesome accolades_ dev - I'll give it a try when I have some time! - Please like, share and subscribe if you have not done so already - Thanks!

[@paindos]

I need the code. I also want to reveal the section when someone click, other wise it will show only button

[@kyrapalisa7619]

Hi! Thanks for this tutorial it helped me a lot! One thing doesn't work properly for me... me button doesn't unhide my section with the first "click", only if I double click it (after that it works normally)... do you have an idea how to fix this? Greetings from Austria!

[@System22]

Unfortunately not Kyra Palisa - Please like, share and subscribe if you have not done so already - Thanks!

function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display == "block") { x.style.display = "none"; } else { x.style.display = "block"; } }

[@EREN-m8x]

Thank's for sharing this.👍

[@System22]

Glad to help Harmeet Singh - Please like, share and subscribe if you have not done so already - Thanks!

[@eyelikeit4u]

Great tutorial. Definitely what I was looking for. Question: I want to have 2 columns. In the left column I have 4 buttons. In the right column I have 4 modules. I want it to work like an accordion: when I click the first button, the first module shall show and all others hide. When I click on the second button the second module shows and all other modules go into hide. Can I do that with your approach?

[@System22]

This video may help you eyelikeit4u - kzbin.info/www/bejne/r5WQqHqhedadi9E - Please like, share and subscribe if you have not done so already - Thanks!

[@eyelikeit4u]

@@System22 Thank you for your quick reply and for the recommendation. That indeed fulfills half of my wishes. The other half would be that when I open Section 1, any or all other open sections close with that click. So I start with by default with Section 1 open. When I click on Section 2, then Section 1 closes and Section 2 opens … any ideas? Thanks again!

[@AntonioHernandez-xc4nb]

Great video, how could we achieve this with a plus ( + ) and minus ( - ) effect ? in other words when someone clicks the plus to open and minus to close. Thanks in advance .

[@System22]

Glad to help Antonio Hernandez - Easiest way would be to duplicate the button add a+ to one and a - to the other, they will both actually do the same thing, but give the effect you are looking for. - Please like, share and subscribe if you have not done so already - Thanks!

[@AntonioHernandez-xc4nb]

@@System22 Subscribed :) So essentially what you suggest is to have 2 buttons next to each other ?

[@JohnAdreamstyler]

Cool, Thank you for sharing that :-)

[@System22]

Glad to help John A - Please like, share and subscribe if you have not done so already - Thanks!

[@Mikefreeman31]

so I tried this a few times using a fixed div and I couldn't get it to work. Does it not work on fixed content?

[@System22]

Should do!

[@piratarest]

you've just saved my life

[@System22]

Glad to help David F. - Please like, share and subscribe if you have not done so already - Thanks!

[@nobleamankwah-ampofo9472]

Thank you very much for this insight. i have a little challenge. can the button be assigned or customised to a particular section. i tried having several several buttons but each directs to only section. thank you

[@System22]

Yes you can Noble Amankwah-Ampofo - I made this video for you: kzbin.info/www/bejne/r5WQqHqhedadi9E - Please like, share and subscribe if you have not done so already - Thanks!

[@chiptuningrigotech2583]

Thanks. To avoid that unprofessional "double click at first time" simply replace the script to: function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } }

[@System22]

Awesome!

[@SuperHobanger]

Hi is there a way we can hide the button after it has been clicked?

[@System22]

Glad to help Michael Ho - Sure, just put it in another section you want to hide on click - Please like, share and subscribe if you have not done so already - Thanks!

[@daliborcopic6148]

Is there a way to avoid the double-clicking on the button and to reveal the section on 1-click?

[@System22]

Not that I know of Dalibor Ćopić - Please like, share and subscribe if you have not done so already - Thanks!

[@QUESTtalks]

if someone has a solution to avoid the initial double-click, please share!

[@lionhohle3441]

@@QUESTtalks Just switch the "none" and "block" requirements, because this is made for a first shown element that disappears, so just switch those two.

[@ashleighsincebaugh2679]

@@lionhohle3441 Thank you so much!!!!!!

[@imranamin79]

its working but I have to click twice can you please help

[@System22]

Glad to help Imran Amin - Check out this updated video; kzbin.info/www/bejne/nobNm2qLZsiFb9k - Please like, share and subscribe if you have not done so already - Thanks!

[@steelkiss74]

Is there a way to get around having to double click the button the first time?

[@steelkiss74]

all good, I found that if you switch the "block" and "none" in the script then you do not need to double click the first time.

[@System22]

Fantastic - Well done!

[@L.G.S.Design]

For anyone wondering what that looks like: Pre-Change (Double-Click): function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } Post-Change (Single-Click): function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } Thanks @@steelkiss74 for the info!

[@porruolivier2916]

@@L.G.S.Design and @steelkiss74 thank you very much, it works but once you click to open, it is impossible to close it. Do you have the same problem ?

[@GabrielaCorderoJahr]

I have the same problem of Porru Olivier. Is difficult to close it, really its close when it wants. And for the double clock for to open and how to solve it, you say to exchange the x.style.display = "block" with x.style.display = "none"?

[@juanJose-ug5lw]

Thank you for sharing this great knowledge of Divi. I would be pleased if it was possible to make a complete video of a website of an online store with divi and woocommerce, as complete as possible, using the custom post type divi, thanks in advance. Thank you

[@System22]

Here's my Divi Woocommerce playlist, I made it a couple of years ago, it should be helpful: kzbin.info/aero/PLqabIl8dx2wpZIWp6Ef_y7UjJaFbsSATn

[@shayantanbiswas7221]

Thank you so much

[@System22]

Glad to help Shayantan Biswas - Please like, share and subscribe if you have not done so already - Thanks!

[@florianmatz2707]

there is a way better way to do so with a normal divi button

[@System22]

Is this a question or a statement Florian Matz?

[@fargetti5385]

Very Good! Thank you!

[@System22]

Glad to help Fargetti - Please like, share and subscribe if you have not done so already - Thanks!