Divi 4 Hide Or Show A Section On Button Click

  Рет қаралды 21,237

System 22 Web Design | Divi Theme Elementor WP

System 22 Web Design | Divi Theme Elementor WP

Күн бұрын

Пікірлер: 77
@cassiosiquara
@cassiosiquara 3 жыл бұрын
I want to like a thousand times, but I can't... so I leave this comment and subscribed. Amazing content, keep teaching!
@System22
@System22 3 жыл бұрын
Wow, thank you!
@alepbr4749
@alepbr4749 3 жыл бұрын
Love it!!!! Worked awesome. SOooo easy to follow and recreate. Thank you so much for creating this!
@System22
@System22 3 жыл бұрын
Glad to help Ale PBR - Please like, share and subscribe if you have not done so already - Thanks!
@jozilljoy
@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
@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
@zrbx 3 жыл бұрын
Thanks! You laid the foundation for what I needed to get done! Keep up the great work!
@System22
@System22 3 жыл бұрын
Glad to help zahir rahman - Please like, share and subscribe if you have not done so already - Thanks!
@ghulamrasool-nw5hy
@ghulamrasool-nw5hy 4 жыл бұрын
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
@System22 4 жыл бұрын
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
@reasonsfor1 3 жыл бұрын
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
@System22 3 жыл бұрын
Glad to help Jon Banthorpe - Might try background-size: cover; or contain CSS with your button.
@MariaFerraro
@MariaFerraro 3 жыл бұрын
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
@System22 2 жыл бұрын
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
@porruolivier2916 4 жыл бұрын
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
@System22 4 жыл бұрын
Sono felice di aiutare Porru Olivier - Per favore, condividi e iscriviti se non l'hai già fatto - Grazie!
@entheonsupport822
@entheonsupport822 2 жыл бұрын
Is it possible to put the button on one page and have it make changes on another page for all viewers?
@System22
@System22 2 жыл бұрын
Not that I Know of Entheon Support - Please like, share and subscribe if you have not done so already - Thanks!
@khalilaizzatunnisa769
@khalilaizzatunnisa769 3 жыл бұрын
Thanks for the tutorial. My question : Why the first time to show the element, we have to double click the button ?
@System22
@System22 3 жыл бұрын
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
@khalilaizzatunnisa769 3 жыл бұрын
@@System22 Aha..yes.. already subscribe and like. Thanks ..
@juliancronje5827
@juliancronje5827 2 жыл бұрын
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
@System22 2 жыл бұрын
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
@aleighamattison1098 3 жыл бұрын
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
@System22 3 жыл бұрын
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
@juliancronje5827 2 жыл бұрын
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
@System22 2 жыл бұрын
Might want to try again Julian Cronje - Please like, share and subscribe if you have not done so already - Thanks!
@LuccConstantin
@LuccConstantin 3 жыл бұрын
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
@System22 3 жыл бұрын
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
@paindos 2 жыл бұрын
I need the code. I also want to reveal the section when someone click, other wise it will show only button
@kyrapalisa7619
@kyrapalisa7619 3 жыл бұрын
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
@System22 3 жыл бұрын
Unfortunately not Kyra Palisa - Please like, share and subscribe if you have not done so already - Thanks!
3 жыл бұрын
function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display == "block") { x.style.display = "none"; } else { x.style.display = "block"; } }
@EREN-m8x
@EREN-m8x 3 жыл бұрын
Thank's for sharing this.👍
@System22
@System22 3 жыл бұрын
Glad to help Harmeet Singh - Please like, share and subscribe if you have not done so already - Thanks!
@eyelikeit4u
@eyelikeit4u 4 жыл бұрын
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
@System22 4 жыл бұрын
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
@eyelikeit4u 4 жыл бұрын
@@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
@AntonioHernandez-xc4nb 4 жыл бұрын
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
@System22 4 жыл бұрын
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
@AntonioHernandez-xc4nb 4 жыл бұрын
@@System22 Subscribed :) So essentially what you suggest is to have 2 buttons next to each other ?
@JohnAdreamstyler
@JohnAdreamstyler 3 жыл бұрын
Cool, Thank you for sharing that :-)
@System22
@System22 3 жыл бұрын
Glad to help John A - Please like, share and subscribe if you have not done so already - Thanks!
@Mikefreeman31
@Mikefreeman31 4 жыл бұрын
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
@System22 4 жыл бұрын
Should do!
@piratarest
@piratarest 3 жыл бұрын
you've just saved my life
@System22
@System22 3 жыл бұрын
Glad to help David F. - Please like, share and subscribe if you have not done so already - Thanks!
@nobleamankwah-ampofo9472
@nobleamankwah-ampofo9472 4 жыл бұрын
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
@System22 4 жыл бұрын
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
@chiptuningrigotech2583 4 жыл бұрын
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
@System22 3 жыл бұрын
Awesome!
@SuperHobanger
@SuperHobanger 4 жыл бұрын
Hi is there a way we can hide the button after it has been clicked?
@System22
@System22 4 жыл бұрын
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
@daliborcopic6148 3 жыл бұрын
Is there a way to avoid the double-clicking on the button and to reveal the section on 1-click?
@System22
@System22 3 жыл бұрын
Not that I know of Dalibor Ćopić - Please like, share and subscribe if you have not done so already - Thanks!
@QUESTtalks
@QUESTtalks 3 жыл бұрын
if someone has a solution to avoid the initial double-click, please share!
@lionhohle3441
@lionhohle3441 3 жыл бұрын
@@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
@ashleighsincebaugh2679 3 жыл бұрын
@@lionhohle3441 Thank you so much!!!!!!
@imranamin79
@imranamin79 2 жыл бұрын
its working but I have to click twice can you please help
@System22
@System22 2 жыл бұрын
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
@steelkiss74 4 жыл бұрын
Is there a way to get around having to double click the button the first time?
@steelkiss74
@steelkiss74 4 жыл бұрын
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
@System22 4 жыл бұрын
Fantastic - Well done!
@L.G.S.Design
@L.G.S.Design 4 жыл бұрын
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
@porruolivier2916 4 жыл бұрын
@@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
@GabrielaCorderoJahr 4 жыл бұрын
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
@juanJose-ug5lw 4 жыл бұрын
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
@System22 4 жыл бұрын
Here's my Divi Woocommerce playlist, I made it a couple of years ago, it should be helpful: kzbin.info/aero/PLqabIl8dx2wpZIWp6Ef_y7UjJaFbsSATn
@shayantanbiswas7221
@shayantanbiswas7221 4 жыл бұрын
Thank you so much
@System22
@System22 4 жыл бұрын
Glad to help Shayantan Biswas - Please like, share and subscribe if you have not done so already - Thanks!
@florianmatz2707
@florianmatz2707 2 жыл бұрын
there is a way better way to do so with a normal divi button
@System22
@System22 2 жыл бұрын
Is this a question or a statement Florian Matz?
@fargetti5385
@fargetti5385 3 жыл бұрын
Very Good! Thank you!
@System22
@System22 3 жыл бұрын
Glad to help Fargetti - Please like, share and subscribe if you have not done so already - Thanks!
Divi 4 How To Use VH And VW Viewport Units
7:36
System 22 Web Design | Divi Theme Elementor WP
Рет қаралды 3,4 М.
Toggle Sections and Rows with Button Modules // Divi Tutorial
14:30
Michelle Schneider
Рет қаралды 7 М.
MY HEIGHT vs MrBEAST CREW 🙈📏
00:22
Celine Dept
Рет қаралды 94 МЛН
Não sabe esconder Comida
00:20
DUDU e CAROL
Рет қаралды 57 МЛН
Это было очень близко...
00:10
Аришнев
Рет қаралды 6 МЛН
Divi 4 Hide And Show Multiple Sections On Button Click 👍
10:18
System 22 Web Design | Divi Theme Elementor WP
Рет қаралды 8 М.
Divi "Read More" Button with jQuery - Reveal a Hidden Section on Click
12:55
Ania Romańska (Divi Lover)
Рет қаралды 4,7 М.
Divi Theme Magic: Toggle Any Section with a Button Click!
13:19
System 22 Web Design | Divi Theme Elementor WP
Рет қаралды 752
Divi Theme Hide Or Show Sections On A Button Click 👍👈👍👈
19:42
System 22 Web Design | Divi Theme Elementor WP
Рет қаралды 12 М.
How To Add A Button To A Divi Blurb Module
7:55
Pee-Aye Creative
Рет қаралды 8 М.
Top 26 Divi Hidden Features | Divi Tips and Tricks
30:22
Matt - WPress Doctor
Рет қаралды 28 М.
Divi 4 Image With Color Background And Text Overlay With CTA On Hover 👍
12:23
System 22 Web Design | Divi Theme Elementor WP
Рет қаралды 7 М.
MY HEIGHT vs MrBEAST CREW 🙈📏
00:22
Celine Dept
Рет қаралды 94 МЛН