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

Learn to code with jQuery by following this tutorial.
Welcome to our jQuery Custom Tab tutorial using the Divi page builder! In this video, you will learn how to code with jQuery and the Divi page builder to create beautiful and professional-looking websites.
Divi is a popular WordPress page builder that allows you to create stunning websites using a drag-and-drop interface. With Divi, you can easily create custom layouts, add interactive elements, and create dynamic effects without needing to know any code.
However, if you want to take your website-building skills to the next level, follow along with this tutorial. In this tutorial, you will learn how to use jQuery and the Divi page builder to create a custom tab on your website. A custom tab is a great way to add additional content or functionality to your website in a visually appealing and organized manner.
Whether you are a beginner at coding or an experienced developer looking to expand your skills with the Divi page builder and jQuery, this tutorial is for you. By the end of this video, you will have the knowledge and skills to create your own custom tabs and add them to your Divi website.
Download code: divimobifirst....
Autoprefixer CSS online: autoprefixer.g...
Lottiefiles: lottiefiles.com/

[@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.

[@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!

[@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?

[@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

[@talha_Malik786]

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

[@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);

[@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...😊😊😊

[@alisharibrahman]

When i write hideall function its not working

[@softtechcafe]

its doesn't work from the start