How To Create Hide and Reveal Content With jQuery And Divi? | (Menus, Tabs, Accordions and more)

[@dylannjohn6984]

Wow. I learned a lot from this video. Well structured. Thank you.

[@divimobifirst4825]

Glad it was helpful!

[@UCb4Ggzu9wRDFtEsRPnAW9lg]

Very good. I loved this content. I'm from Brazil and gained a follower from here

[@skeptimedia1093]

thank you so very much. where are you guys. no more videos or updates anymore???

[@nickfrets7437]

Great video and very well explained,. Thank you

[@sharjeelkhan4132]

Hi, Thank you so much for this tutorial. I have a question, is there any way to set our sections to auto collapse and expand if not clicked and triggered? I don't want it to use for FAQ but something would fit perfectly with this module.

[@nikhlede6438]

Thanks for the great video and wonderful explanation. I have a follow up question though. Is it possible to change the action required from "click" to "hover", as in, the content on the right side being shown when the blurb on the left is being hovered over instead of the user clicking on it being required?

[@SolarMagzn]

Thank you very much! Can it be somehow reversed, so the content on the right stays hidden until its clicked? Thank you in advance!

[@facundomanzi]

Thank you so much for the intructive !!!! I love it! I copied the steps perfectly but in the right section I would like to put a section of 1 column. So in that section of 1 column I can put a blog module and so filter by category. But when I change from 2 columns to 1 column the filter does not work anymore. What am I doing wrong and what can I do?

[@ideaplusagency]

Same issue!!Doesnt work with 1 column

[@himanshukhoriwal]

Really Awesome Video I must Say...Thanks a lot for Code and Beautiful Explaination...😍😍😍😍 I also have one Question...What to do if I want to show the Animated GIF on left hand side below the Blurbs ....is that possible ? If yes then How ?....It would be great help if addressed.....thanking you in advance...😊😊😊

[@AwaisMalik-yv3du]

How to keep the current tab active on page reload?

[@divimobifirst4825]

//To keep the tab active and its content visible after a page refresh, you need to save the state of the active tab somewhere. One common way to do this is to use the browser's local storage. Add the following line of code inside the click function. localStorage.setItem("activeTab", id); // Then add the following code inside the $(document).ready(function($){ code block to retrieve the setItem from the local storage when the page reloads. let activeTab = localStorage.getItem("activeTab"); if (activeTab) { hideAll(); $("#content-" + activeTab).removeClass("hide"); $("#subtitle-" + activeTab).removeClass("hide"); $("#trigger-" + activeTab).addClass("rotate"); $("#trigger-" + activeTab).addClass("active"); } // Let me know if this worked for you

[@AwaisMalik-yv3du]

@@divimobifirst4825 thank you for replying.i already solve my problem with this code (function($) { $(document).ready(function($) { // Add the "rotate" and "active" classes to the first tab by default $("#jtrigger-1").addClass("rotate"); $("#jtrigger-1").addClass("active"); $("#jcontent-1").removeClass("hide"); $("#jsubtitle-1").removeClass("hide"); $("[id^=jtrigger]").click(function() { jhideAll(); let jid = $(this).attr("id").replace("jtrigger-", ""); $("#jcontent-" + jid).toggleClass("hide"); $("#jsubtitle-" + jid).toggleClass("hide"); $(this).addClass("rotate"); $(this).addClass("active"); }); //hide all rows function jhideAll() { $("[id^=jcontent]").each(function() { $(this).addClass("hide"); }); $("[id^=jsubtitle]").each(function() { $(this).addClass("hide"); }); $("[id^=jtrigger]").each(function() { $(this).removeClass("rotate"); $(this).removeClass("active"); }); } }); })(jQuery);

[@talha_Malik786]

amazing but can you tell me , like what if we wanted to create this in horizontal way?

[@alisharibrahman]

When i write hideall function its not working

[@softtechcafe]

its doesn't work from the start