Creating Custom Tabs With Icons Using Blurbs

How to add icons to Divi Tabs? How to add different module inside Divi Tab?

Instead of adding icons to Divi Tabs Module or looking for a way to display another module inside each tab I took a different approach and created custom tabs layout using Blurbs as tabs titles and regular Divi sections for each tab content. This way we aren’t constrained by the default Tabs Module settings and can put any modules inside each tab. How great is that? My layout scales nicely for mobile and is available for you to download. Below I’m giving a step by step instructions on how it was made.

Step 1 – Create Titles Structure

Add a standard section and set this section padding to 0. In the Advanced Tab set the CSS ID to blurb-tabs.

Inside this section, there should be a row with one column. We don’t need to worry about the number of columns for each tab, we will control it via custom CSS (flexbox property to be exact). The demo uses four columns for the titles, but with some tweaks, it can easily be adapted to have either more or fewer columns.

For the row settings – make the row fullwidth and set Custom Gutter Width to 1.

Now we add four Blurbs Modules. You can style the blurbs as you wish, in my layout I’m using icons and I’ve set different padding for desktop, tablet and mobile and gave each blurb different background colour. The important thing is to add a custom class of tab-title to each and also set the link URL to #tab1 (#tab2, #tab3, #tab4 – each blurb links to different id).

Step 2 – Style The Titles

Obviously right now we have four fullwidth blurbs. It can be easily fixed with CSS flexbox. If you’d like to learn more about it – there is a fun game called Flexbox Froggy, which teaches you all the flexbox properties. Here is our CSS to fix it:

/* Style the Blurbs Tabs */
#blurb-tabs .et_pb_column {
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
}
#blurb-tabs .tab-title {
	width:25%;
}

We need to use media queries to change the width of blurbs on smaller screen sizes, like this:

@media (max-width: 767px ) {
	#blurb-tabs .tab-title {
		width:50%;
	}
}
@media (max-width: 479px ) {
	#blurb-tabs .tab-title {
		width:100%;
	}
}

To use a different number of columns for tabs you’d need to adjust those width values.

In my demo layout, I’m also adding a few adjustments for the tablet and mobile view (like changing the icon size and moving the icon to the left on mobile). Here are full media queries styles for this layout:

/* Tab Titles Mobile Styles */
@media (max-width: 767px ) {
	#blurb-tabs .tab-title {
		width:50%;
	}
	#blurb-tabs .tab-title .et_pb_main_blurb_image {
		margin-bottom:10px; /* Reduce icon bottom margin */
	}
}

@media (max-width: 479px ) {
	#blurb-tabs .tab-title {
		width:100%;
	}
	#blurb-tabs .tab-title .et_pb_blurb_content { /* This moves icon to the right */
		display:flex;
		align-items:center;
		justify-content:flex-start;
	}
	#blurb-tabs .tab-title .et_pb_main_blurb_image { /* Fix icon margins on mobile */
		margin-bottom:0;
		margin-right:30px;
	}
}

This gives us nice, responsive look for blurbs, but we also use some custom CSS to create hover effects for each tab/blurb, as well as set different colours for “active” tab. Here is the code:

/* Hover Styles for Blurb Tabs - Titles */
#blurb-tabs .tab-title {
	transition:all .3s ease-in-out;
}
#blurb-tabs .tab-title:hover {
	cursor:pointer; 
	background:#222; /* Tab hover background color */
}
#blurb-tabs .tab-title.active-tab {
	background:#D9DFE2; /* Active tab background color */
}
#blurb-tabs .tab-title.active-tab .et_pb_blurb_container h4 a {
	color:#000; /* Active tab title color */
}
#blurb-tabs .tab-title.active-tab .et-pb-icon {
	color:#666!important; /* Active tab icon color */
}

Step 3 – Add your content

We need four section – one for each tab. The best part of this layout is that you can put literally anything you like in each tab – as long as it fits inside a single section. I’m using an Image, Text and a Button Module in each section/tab.

The important part is to set proper CSS classes and IDs. Each section needs a tab-content class and a unique ID of tab1, tab2, tab3 and tab4 (the names should be the same as Blurbs URL attributes, without the # symbol).

Step 3 – Hide the Tabs on page load

We’ll hide the section with css, like this:

/* Hide the tabs content/sections */
.tab-content {
	display:none;
}

Step 4 – a little jQuery magic

Now – with some jQery – we’ll add an active-tab class to each Blurb Title when clicked, and show a section with the same ID as the Blurbs href attribute (URL), while making sure that other sections are being hidden. This is the working code:

jQuery(document).ready(function($) {
	/* Blurbs as Tabs */
	$('.tab-title').each(function () {	
		var section_id = $(this).find("a").attr("href");
		$(this).find("a").removeAttr("href");	
		$(this).click(function() {
			$(this).siblings().removeClass("active-tab");
	                $(this).addClass("active-tab");
			$('.tab-content').hide();
			$(section_id).show();
		});
	});
});

If you are not sure where to put that jQuery code – I have written some detailed instructions on how to add javascript to your Divi page. That’s it – you should be able to easily recreate this layout on your Divi website 🙂

Edit:

How to make one tab open on page load?

To make one of the sections visible by default you would need to add another class to this section, eg. tab-open (so it will have both: tab-content tab-open, without the comma – just the space between the two). And to make corresponding tab active the Blurb Module also needs second class active-tab (it will have both: tab-title active-tab).

And then in CSS right after this:

.tab-content {
	display:none;
}

you should add:

.tab-open {
	display:block;
}

Edit #2:

How to add a smooth scroll to choosen section on tab click?

I’f you’d like your page to automatically scroll to the selected section, like on that demo page (which can be useful on mobile devices), you’d need to add this line to jQuery function:

$('html, body').animate({scrollTop: $(section_id).offset().top}, 1000);

right after

$(section_id).show();

so the full JS code would look like this:

jQuery(document).ready(function($) {
	/* Blurbs as Tabs */
	$('.tab-title').each(function () {	
		var section_id = $(this).find("a").attr("href");
		$(this).find("a").removeAttr("href");	
		$(this).click(function() {
			$(this).siblings().removeClass("active-tab");
	                $(this).addClass("active-tab");
			$('.tab-content').hide();
			$(section_id).show();
			$('html, body').animate({scrollTop: $(section_id).offset().top}, 1000);
		});
	});
});

And if you are using a fixed navigation you’d need to edit this new line of code (and replace 80 with your navigation height):

$('html, body').animate({scrollTop: $(section_id).offset().top - 80}, 1000); 

That’s it!

Free Resources for Divi Lovers

Join our newsletter to get the good stuff!

We’ll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.

Sign up to download

Get access to this layout and all the free resources made exclusively for our subscribers!

Already subscribed?

Fill the signup form and if you’re on the list it’ll get you straight to the download page!


Can’t see the form? Click here

Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

493 Comments

  1. Ilse

    Hi Ania, thanks for this tutorial! I was thinking about how to make it easier to change the number of tabs. This is what I came up with:

    * Put the tab blurbs to 100% width and put them each in their own column (e.g. row with 4 columns if you want 4 tabs)
    * Add ID “#project-tabs” to that row
    * Change the jQuery as follows:

    $(‘#project-tabs’).find(‘.active-tab’).removeClass(“active-tab”);

    instead of:

    $(this).siblings().removeClass(“active-tab”);

    * So now if you want to change the number of tabs, you can just (1) change the column structure, (2) add or remove blurbs and (3) add or remove content sections (note: link the new blurb(s) to the new content section(s) when adding). There is no need to manually adjust the width of the blurbs and it looks more understandable in the wireframe mode without having to look into the code.

    Reply
    • Ania Romańska

      What a helpful modification. Thank you for sharing, Ilse! 🙂

      Reply
  2. Allison Barr

    Hi Anna, thank you so much for this tutorial!

    Is there any reason why

    $(this).siblings().removeClass(“active-tab2”);

    is not working?

    It is strange because it works perfect on one page on my website, but on another the ‘active-tab’ is not being removed. Thank you!

    Reply
  3. Rob

    Hi Ana,

    I can’t seem to get the main tab-content area to show on page load or when I click on the tabs. I am 90% sure I followed every step in your directions, but I am probably forgetting something. Please help. It’s the 3 blue tabs to the left of the agent image in the body of the page.

    Reply
    • Cortney

      Same here Rob. I’ve followed the instructions and I cannot get my hidden sections to reveal when I click on the image in my blurb.

      Reply
      • James O

        I am having a similar issue where I have followed the steps word for word apart from naming the links and correspondint content section differently.

        When I click the tab nothing is revealed and my page scrolls to the top.

        Any help would be really appreciated!

      • Ania Romańska

        It’s difficult to provide specific advice without viewing the problematic page directly, but if the links are scrolling to the top, it likely indicates that the JavaScript code isn’t functioning correctly. This could be due to a JS conflict or the code being placed incorrectly.

      • James O

        Hi Ania, thanks for your extremely swift reply.
        Would you mind having a look at my page and code?

        https://refresh.dalendesigns.co.uk/home-new/

        I have never used JS befor so would really appreciate your help finding where I am going wrong.

      • Ania Romańska

        I’m sorry, James, but I can’t seem to access this URL (it gives 403 forbidden error).

      • James O

        Hi Ania thanks agan for trying I do appreciate it.
        As it turns out I fixed the issue by using your template. Although when I saved each element as a library section and put it into my existing page I was still getting the same issue. What actually solved the problem was saving my original page sections to my library and adding them to your template page.
        Not sure what specificaly changed but to anyone having issues they might want to try this method.

  4. Marcia Leger

    This is excellent I use it on several sites that I have built. Is it possible to apply this javascript magic to select options of a form?

    Reply
  5. Ana

    Hey Ania,

    Excellent work as always!

    One request though if you please.

    How can I activate the smooth scroll to chosen section on tab click, ONLY on mobile devices?

    Thanks again for your kind help,

    Ana

    Reply
    • Ania Romańska

      You’d need to modify the jQuery code and use if/else statement based on screen width. This should get you started:

      $(document).ready(function() {
          // This will fire when document is ready:
      
          $(window).resize(function() {
              // This will fire each time the window is resized:
      
              if($(window).width() >= 981) {
                  // if larger or equal
                  // add code here
      
              } else {
                  // if smaller
                  // add code here
              }
      
          }).resize(); // This will simulate a resize to trigger the initial run.
      });
      Reply
  6. Akagzi

    Really loved your work. Can you please write the CSS code to enlarge (with animation) the active tab icon (image in my case)? Page link saffronaudio.com/test-page/

    Reply
  7. qwert

    hi,
    very nice this tutorial.
    I have the problem if I use this in the backend with activate visual builder my section ist display:none;
    How can I use this?

    Reply
  8. Óscar

    Thank you Ania for sharing this excellent job and for your support. I added that in my web and works like a charm.
    Unfortunately google Dev tools (lighthouse) says links are not crawable, and that affects to SEO. how can we fix that?

    Reply
  9. art

    hi, I created a custom blurb section and works well on chrome, but on safari, the content doesn’t show. This section was working on a older verision of wordpress (Current version: 6.0.3)

    I have moved and copy everything exactly the same and the only difference is the wordpress version.

    can u please let me know what is the problem with new wordpress version. thank you

    Reply
  10. Daniel

    Hi Ania,

    first of all, thank you for your great work.
    Is there a way to integrate the whole thing vertically into the website?

    With kind regards
    Daniel

    Reply
  11. Melissa

    I imported the file and copy the CSS and JS exactly. However, the content is still hidden when I click on each tab. Can you take a look and see what is causing this?

    Reply
  12. Lorie

    Hi! I already add the JSON file and follow all the instructions but the tab-content are all shown on page load, how can I fix this? I also add display:none!important in tab-content in css to hide the content but still not working

    Reply
  13. Glen Allan

    Having an issue where the anchor links cover up the tabs by scrolling past them. Any way to have there be no scrolling at all or do you know of a good scroll offset code to use. i’ve adjusted the extra code a few times and it does change how it scrolls, but it still just hides the tabs after the jquery code does its thing.

    Reply
  14. ariel gurman

    Hi! I need to change the active description text color or opacity, when the tab is not active, it should have like 20% opacity and when it’s active 100%, how can I do this? Thanks for this tutorial! Is really helpful

    Reply
  15. Michael

    Hi Ania
    What a great layout trick! Thank you so much.
    I use your tab-layout multiple times throught the same page.
    When the page loads, in each “tab-row” there is one “active and open tab”. However, when i change the tab within one row, the open tab of the other rows close. Is there any way to easily navigate around that issue?
    Best regards
    Michael

    Reply
    • Ania Romańska

      Hi Michael,
      Yes, it should be possible, but it would require tweaking the JS code – so that the

      $('.tab-content').hide();

      part is somehow relative to the tab-title you are currently clicking. I will make sure to include this scenario when I’m preparing an updated version for this method 🙂

      Reply
      • Balazs

        Hi Ania,

        I wonder if youe’re planning to add that soon, because I would need it so much for multiple projects:)

        Thank you for your blurb tabs anyway, it’s very useful!

  16. Francisco Whittaker

    Great tutorial, thanks Ania. Apparently, my version of Divi is slightly different and I had the option of using a title link for the blurb and a module link. It might be helpful for anyone that is having issues that the Title Link URL is the one you need to use and not the other one. I much appreciate your help.

    Reply
  17. Pierre

    Hi,
    This is so great!
    Is it possible to achieve a 6 buttons in a row?
    I can’t find a comment to help how to do that…
    Thank you,
    Pierre

    Reply
  18. Asaf Dvash

    Great Guide!
    Is there a way to make the appearing sections have some fade effects?
    So it looks smoother?

    Reply
  19. Rosson

    Hello! Thank you for this!

    Question – is it possible to have the blurb also close the section? This way the blurb link would both open and close the section?

    Reply
    • Maarten

      Yes, that would be great. But I don’t think the comments are read anymore.

      Reply
      • Ania Romańska

        I’m sorry for the late reply, but this has been answered before 😉
        Try modifying the JS code: instead of

        $(this).addClass("active-tab");

        you can use

        $(this).toggleClass("active-tab");
  20. Márcia Cristina Orsi

    Hi I have a problem! I followed the step-by-step “How to make one tab open on page load?”, but it didn’t work, because my tab stays fixed all the time. How can I fix it? I would like it to appear only on page load. When you click on the second tab it will disappear and put the other tab in place.

    Reply
  21. Justin Wilbern

    Excellent tutorial, is there a way to make the menu items trigger multiple sections instead of just a single section? I have 3-4 sections that I need to trigger when clicking on a menu item. I have given them all the same CSS ID (tab 1, tab 2) but only the first section is loading when I click the menu item. Any help would be appreciated.

    Reply
  22. Jesse Busby

    Ania, this is an amazing tutorial – thank you for sharing your wisdom with all of us. Everything works perfectly, but I do have 2 questions:
    1. I have one of the tabs (tab1) set to open when the page loads and it works great, but the tab is not taking on the “active-tab” class on page load only the content is displaying. how do i get that particular tab to take on the class of “active-tab” so the colors of the tab reflect it is open?

    2. How would I create a link that would directly open a different tab upon page load? So, tab 1 is defaulted upon page load, but let’s say that in some other page on my site I want to link to information within tab 2 and when that link is clicked the page loads, but tab 2 opens and displays – how could I do that?

    Thank you so much, I know you stay busy – we all appreciate your insight into all things divi…

    Reply
    • Ania Romańska

      1. The active-tab CSS class needs to be added manually to the Blurb module, which needs to be “opened” on page load.
      2. This would require a custom JS function, which would replace the active classes used in this layout based on some pre-defined URL parameters. I’m sorry, but I won’t be able to help with the exact code.

      Reply
  23. Márcia Cristina Orsi

    Hello, I followed the step by step:
    “How to make one tab open on page load?
    To make one of the sections visible by default you would need to add another class to this section, eg. tab-open (so it will have both: tab-content tab-open, without the comma – just the space between the two). And to make corresponding tab active the Blurb Module also needs second class active-tab (it will have both: tab-title active-tab).”
    However, it didn’t work, when I added the tab-open and tab-active class inside my page the tabs link started to open downwards. This didn’t happen before! Is it possible to make the correction?

    Reply
    • Ania Romańska

      I’m sorry, I don’t see the active-tab and tab-open classes added when I inspect your page. The fact that you are using the section twice on the same page can also cause conflicts if you haven’t adjusted the JS.

      Reply
  24. Johanna LG Mickle

    Your article was so helpful! IS there some css I could use to make the mobile version show the content right below each tab instead of having the tabs stacked first? FYI…I also posted this question on your Youtube channel.
    Thanks!

    Reply
  25. Sabine

    Is the next problem solvable: you search an item, the results show, when you click on the result the page opens where the item is listed.
    Now the problem: I want to jump directly to the word that I searched for AND also if the result is embedded in an Blurb-to-tab/accordion: I want to be forwarded to the correct tab, which should open.

    Reply
    • Ania Romańska

      It is probably doable (as anything really), but seems very complex. Would definitely require a lot of custom code to achieve.

      Reply
  26. Lorilee

    I love this tutorial!

    One thing that is super weird. I can’t get the first of my blurbs to link. I have re-ordered my blurbs and whichever one is first in my list (I also have 4) won’t work.

    So it seems all my CSS class/id’s are correct because all the blurb (tabs) work fine as long as they aren’t the first in the row.

    Reply
    • Ania Romańska

      Hi Lorilee, it looks like it might be a caching issue or you were able to get this sorted, it works correctly when I check your link.

      Reply
  27. Sabine Kessels

    I have succesfully implemented the Blurbs, and have used accordions under the blurbs. This works. Many thanks.
    I would like to know how to make a Link to a Blurb and open an Accordion. So that I can use an URL in a mail or another page in the website, to jump to the location.
    Can you help me?

    Reply
    • Ania Romańska

      If you are having troubles recreating the steps, please download the JSON file and edit the pre-made layout. Hopefully, this helps.

      Reply
  28. Penny Lamont

    THIS was awesome, thanks so much. Worked seamlessly and was exactly what I was looking for 🙂

    Reply
  29. Martin

    Hi

    I cant get the file to work anymore – its loading all the tabs on first page load and then loads them correctly when I click.

    Could you email me on a PM so I can send you URL

    thanks

    Reply
    • Ania Romańska

      Sorry Martin, but we do not provide support for the free resources. If you’d like to get sme help you can post the URL inside our FB group. The demo page works fine with the latest Divi and WP version, so I’d suggest downloading the JSON file again, as your version might be missing some CSS code.

      Reply
  30. Ravelle Whitener

    This is exactly what I needed. Thanks so much! I’ve gotten it all setup and it’s working correctly. One thing though, I have it setup for the first tab to be open on load. That is working fine but the tab doesn’t adapt the active settings when it’s loaded open. It does it fine when clicked on. Is there some way to have it appear as active when it loads?

    Thanks so much!

    Reply
    • Ania Romańska

      Make sure you’ve included the active-tab CSS class in the tab-title blurb 😉

      Reply
  31. Bek

    Hello.
    Is there any way to make these tabs switch on mouse scrolling… it will be a great UX feature!

    Reply
  32. arnaldo

    hello Ania, i’m tried your blurb tab and it’s fantastic.. i have custom it, but i wish to ask if there was the possibility to have one tab just open…. now they are all on “hide”, i prefer to see the first to left on “SHOW”.. THaNKS A CONGRATULATION.

    Reply
  33. Mai

    hello there,
    I tried following your guide step for step but I do not get the same result. After adding the display none; css and then the javascript the sections still remain hidden on my page.

    I just need the function with hiding the sections until you press the tab, so I made a different design.

    I really hope you can help me quickly because your solution is perfect – I just don’t know what I did wrong.

    Reply
    • Ania Romańska

      The Blurb modules need to be in the same column, or the JS would need to be modified.

      Reply
      • Mai

        hi Ania, thanks for the quick reply!

        Okay so I tried making the blurb modules in 1 column only but I still get the same result.

      • Ania Romańska

        Hi Mai,

        I’m sorry, but it looks like more pieces are missing (missing tab-title CSS classes for example). Please download the JSON layout and modify it to match your design. This way you won’t need to worry about the functionality.

      • Mai

        Hi Ania,

        I just tried downloading and importing the layout but I still get the same issue. The elements are not showing up and as soon as I paste in the “display none” CSS code the elements also disappear from the divi frontend builder.

        I am sorry for the inconvenience and I really hope you can help me because it is a great solution to my problem.

      • Mai

        Oh, now I see that the problem is not with the CSS but the javascript code. As soon as I type in tab1 and tab-content the section disappears and does not show up again.

  34. Abhinav

    Hi Anna,

    Love your clean elegant designs!

    Is there anyway to disable the jquery scroll jquery line at the end only for desktops and tablet . This means we require the scroll function only on mobile devices.

    Please do reply ! awaiting your response! Btw just bought Divi Toolbox and i’m loving it.

    Reply
    • Ania Romańska

      That would require a bit more complex JS code modifications. I’m sorry, but I wont’ be able to help in details.

      Reply
  35. Alan Rogers

    Hi,

    I think this layout is great, I’ve had it working for some time on a site I created – http://www.happysnapz.co.uk/dance-photography/ – but just recently the javascript appears to be causing issues in the BACK END ??

    (The Preview tab springs up without prompting and the page has no content other than the Footer. It’s also impossible to save updates?)

    I’ve looked at the code you have here and it’s different to what I have on my site, have you changed it recently?

    I seem to have an extra line at the bottom?

    $(‘html, body’).animate({scrollTop: $(section_id).offset().top}, 1000);
    $(‘html, body’).animate({scrollTop: $(section_id).offset().top – 120}, 1000);
    });

    I’m not sure I need to remove one of these lines?

    Any guidance would be most appreciated.

    Thanks – Alan

    Reply
    • Ania Romańska

      You’ve used the modified version with the scroll option, there is no need to change the code. If you are experiencing issues in the backend please try disabling the JS when you are in the VB and enabling it back once you finish with your edits.

      Reply
      • Alan Rogers

        Ah OK, thank you so much for your quick response Ania that really is very much appreciated. 🙂

        I thought that those last two lines of code looked strange and maybe causing a conflict somehow, but everything seems to be working alright on the Front End so I guess they must be OK 🙂

        I will do what you say and disable the js if I get any more issues. Strangely, I’m not experiencing the same issues this morning??

        Many thanks once again

  36. Jennifer Niles

    Hello beautiful tab layout, wondering if you tried tabs on the right with the content on the left? I’m trying to find one that works well. Are you willing to do another post/layout with right tabs?

    Reply
  37. Marney

    Hi, this is so super!
    Just wondering if there is a way to add Prev/Next buttons that can target the specific tabs?

    Reply
  38. Kuberan Srihari Sonal Shandilya

    how to get the tab working as a dropdown menu in the mobile view?

    Reply
  39. carly

    Thanks this is a great piece of code. I just have one problem, I have some animation on the 2nd tab which is built into the divi module, but it won’t fire when I get to the 2nd tab, it’s like it already loads on the page load, and the vertical scrolling feature doesn’t work either. Any ideas as to the fix for this? thanks!

    Reply
  40. Paul

    Hi Ania! Fun tutorial.

    Wondering if you could add one thing to your first edit. Instead of just having a tab open, how would we go about having a tab-title be active on page load as well?

    It’s nice having one of the tabs open, but a little strange to not have that associated tab-title appear its selected.

    Reply
    • Ania Romańska

      It is explained at the end of the post. It shows how to make one tab open and correct tab-title active at the same time.

      Reply
  41. Ann

    Hi, loving this hack it is really amazing but for some reason doesnt want to work with Safari for me – it is working on chrome and firefox but not safari.. is there any tip or idea on how to fix this? Thanks so much!

    Reply
    • ann

      Sorry solved.. apperently it is just not working if i put jquery in chiled theme under script… Sorry for that.. moved it to divi integration section and it is working 🙂

      Thank again really appreciate your work 🙂

      Reply
  42. Taylor Quate

    Hi Ania,

    Many thanks for this tutorial it has been a great help.

    Is it possible to have one of the sections visible when the user visits the page?

    Thank you.

    Reply
  43. Saschy

    Hi! I have a question.. I am using these tabs on a site and the client LOVES them. Issue is, he wants to use them for different pages and some of those pages have more than 4 tab subjects/titles.
    How do I use this when I will have to edit the CSS sizes, which will affect the other tab’s sizing?

    For example one of the pages has 5 tabs which would mean that i’d change the width from 25% to 20%, then the existing ones of course are broken.

    Do you have any suggestions? (pretty please!)

    Reply
    • Ania Romańska

      You can use separate CSS classes, or add an additional CSS class with different width settings in the CSS.

      Reply
  44. Cha

    I use an image instead of an icon how can I change the image if the tab is active?

    Reply
    • Ania Romańska

      Not possible with CSS, you’d need to use custom JavaScript function to replace the image URLs.

      Reply
      • Cha

        Thank you for the reply Ania I really appreciate it. Do you have any tutorials on how t do it? Thank you

  45. Maeesha

    How to hide the tab on second click?

    Reply
    • Ania Romańska

      Try modifying the JS code: instead of $(this).addClass("active-tab"); you can use $(this).toggleClass("active-tab");

      Reply
      • namshub

        thanks a lot for that nice tutorial.
        I want to close the tab as well on the second click. unfortunately with your proposal it’s not working. any other idea?

    • Andrea Rodriguez

      Hi Ania,

      your tutorial is amazing! Thank you!

      As Namshub, I’d like to be able to close the tab on the second click on the blurb.
      How we can do it?

      Reply
  46. Mattis Lindemann

    Everything works fine, but the JQuery script doesn’t work. I can not open the tabs… the “open” tab (tab-open) is there, still I click on one of the blurb-tabs. Then there is nothing to see.

    I hope you can help!

    But the tutorial is great!

    Reply
      • Andrew

        I’m having the same problem, and finding it deeply frustrating. I’ve been through the tutorial six times and can’t find what I’m doing wrong. How did you solve it? It seems the javascript isn’t working for me; I’ve tried adding it in a code module and in the header. Do I have to use the enqueue method for this to work? Thanks in advance.

      • Andrew

        OK, found the problem. I had mistakenly added the #tab[x] link into the module link url, not the title link url in Divi 4. Switched it and it works perfectly. Thanks Ania for a fantastic tutorial for functionality I know I can use again and again. Just enjoying playing with the appearance now… 🙂

  47. Elite Web Designs

    1 Question + Many Compliments and Praises:

    Question: Can this be replicated to be used with the Divi Accordian Module instead of Tabs? That is, can we put standard section content to display on click of an accordian instance?

    Compliments/Praises: This tutorial is simply one of the best tutorials I’ve seen in years regarding adding beautiful functionality to Divi. The steps were easy to follow and helped me take a customer’s website to the next level. Thank you so much!

    Reply
    • Ania Romańska

      Thank you very much for your kind words, I am happy to hear that it is helpful. Unfortunately, to answer your question, no, this won’t be easy to replicate using the Accordion module. Try googling how to make a shortcode from a Divi Layout, there is a few tutorials and a free plugin as far as I know (our Divi Toolbox also has this functionality) – you should be able to insert any layout inside the standard accordion with a shortcode.

      Reply
  48. Efke

    Well, i cant make it work correctly :/
    The page start with one of the tabs already open but if i try to select any tab (including the opened one) : content disapear and cant be shown again :/

    Reply
    • Efke

      Ok i found the problem : it doesnt work if Blurb modules (class : tab-title) are used only with text (no icon and no title)

      Reply
      • Daphne

        I’ve replaced tab-title with tab-item.

  49. Solomon

    Hi Anna, thanks for such a great tutorial!
    I was wondering how I would modify the code to start with one of the tabs already open… any thoughts?

    Reply
    • Ania Romańska

      It’s explained at the end of the post 😉

      Reply
      • c

        I have added
        .tab-open {
        display:block;
        }
        after this
        .tab-content {
        display:none;
        }
        but it is still not showing 😭

  50. Marc

    Thank You! This is just what I needed

    Reply
  51. Marc

    Thanks this is exactly what I needed!

    Reply
  52. Allan

    hi Ania – thanks SO much for this, its exactly what I needed for my clients Services page: https://www.brain-whisperer.co.uk/services/
    I used custom images rather than Divi icons, and an opacity hover on the tabs. On mobile, I decided to keep all the tabs side by side, and just keep the icon with no title – stacking doesn’t work when you have 5 tabs. Great tutorial and thanks again!
    – A

    Reply
  53. Sara

    I am trying to use Text modules in place of the Blurb modules. Does the jQuery change based on this? I can get the active tab to display, but the second tab won’t display.

    Reply
  54. Michael

    Annia loved this tutorial, very clear , easy to follow and absolutely fantastic. I’m sure all the DIVI nation appreciates this. One question I had though is how can we create a link to each blurb to be used from within the site ( for example a link on the home page links to one of the blurbs directly or a link for external websites to link to one of the blurbs directly) Thanks in advance!

    Michael T.

    Reply
    • Ania Romańska

      Hi Michael, thank you, I’m glad to hear it is still useful. You’d need to add additional JS code which will open the tab based on an URL parameter (this article might hep you get started).

      Reply
      • Karin

        Hello Ania, also looking to do the same here and have a URL for each blurb ( something like example.com/category#blurbtitle ) to be used in emails or internal links.

        Any chance you can teach us how to create that as well, the link shared seems harder to follow than your easy-as tutorial,

        Thanks,

      • Ania Romańska

        I’ll include that in the updated version of this tutotorial.

      • Ilona

        Thanks so much for this Ania, where can we find the updated version of this tutorial?

        also trying to get a link for each tab using a hashtag # in the URL so we can link to it internally or externally, it would be great if you can share a link to that guide too.

      • Marcus

        @Ilona is there a link to the tutorial showing this? I need to link to each tab separately for a client and been struggling if anyone has the updated tutorial link, please share,
        Marcus

      • Ania Romańska

        There is no step-by-step tutorial I could share at this moment, sorry.

      • Alan Rogers

        Hi @ILONA & @MARCUS, I just wondered if you managed to find a solution to link to each Tab content with a Custom ID # URL – or something similar?

        I’m looking for the same solution for a site I have created for a photographer and each Tab is a different Gallery. He wants a specific URL to lead to each Gallery to share with customers. I’ve experimented with adding Custom ID’s to different elements in the layout but with no success as yet 🙁

  55. Carly

    Hi there, this is great thank you, just wondering if it is possible to open a tab via URL. For example if I want to open tab 2 from a location on another website, can this be done?
    thanks for your help!

    Reply
  56. Ademola

    Can one show multiple sections with one click?

    Reply
    • Ania Romańska

      No, not without modifying the JS code.

      Reply
  57. sally

    great tutorial! I was looking for a long time, a way to display my products of woocommerce like this, the only issue I have is that instead of displaying the products one next to each other in a 4 column row, they appear one under the other. Any idea how can I fix that?

    thanks!!!

    Reply
    • Ania Romańska

      It’s impossible to guess, can you share a link?

      Reply
  58. Ademola Adegun

    Thanks for this awesome tutorial.
    I’m having a bit of trouble though. I tried setting modules as my tab content rather than sections. However, changing section_id to module_id in the jQuery doesn’t work. Do you have an idea how I can make this work with modules?

    Reply
    • Ania Romańska

      Sorry, it would need a completely different code I’m afraid, it is not possible to easily replace sections with modules.

      Reply
      • Ademola Adegun

        I tried again. It actually works. The problem wasn’t the module_id. It was my error. I was trying to use text modules for the tabs instead of blurbs. Thanks for the reply.
        I’m using it for a different idea completely. Maybe I’ll send you a link when I’m done. Thanks again.

  59. Satya

    Hello There, I couldn’t find the CSS file to add the styles. I have tried to locate the path as displayed on you tab but couldn’t find it. Please help me to locate the CSS file to add custom styles.

    Reply
    • Ania Romańska

      If you are using the JSON layout, the CSS is inside the Code module.

      Reply
  60. Radko

    Hi Ania,

    can you please tell me how to add multiple of those on one page (all of them with first tab open on pageload)?

    Right now it works bud the other are automaatically collabsed.

    Reply
    • Ania Romańska

      The easiest (but probably not the cleanest) way would be add multiple instances with different names like tab-title2 etc. Otherwise, the JS code would need to be modified.

      Reply
  61. colleen

    HI Ania

    I have loaded the json file and added this :

    .tab-open {
    display:block;
    }

    to the css as instructed and the tab is not displaying .

    Can you help?

    Reply
    • Ania Romańska

      To make one of the sections visible by default you would need to add another class to this section, eg. tab-open (so it will have both: tab-content tab-open, without the comma – just the space between the two). And to make corresponding tab active the Blurb Module also needs second class active-tab (it will have both: tab-title active-tab).

      Reply
  62. fdasfas

    Hi, how to close active tab when I click on active tab?

    Reply
    • Ania Romańska

      It would require additional JS code, it’s not a part of this tutorial, sorry.

      Reply
  63. Julio Flores

    This is great Ania!! Thank you for your tutorial <3

    Quick question, is there a way for tabs to change dynamically depending on the day?

    Say I have 5 tabs (Monday to Friday)
    So when when it is Wednesday, the active tab would be on Wednesday.

    That'd be so dope !!

    Reply
    • Ania Romańska

      The Divi Magic is a plugin, which could help with this I htink.

      Reply
  64. Rajan

    This is amazing! thanks so much, I was able to base an entire website on this feature which I’ve been looking for, for months!

    Please do take a look at the staging site (the url I have added) or http://tunebank.org/ we will be replacing the current site with the new one in a week or two.

    I have a question regarding the opening of the first tab. Is there any way to have the screen scroll down automatically when you click on the first image that opens the tab? I’ve been attempting to do it with the ID’s that are already in place but I wonder if it’s just not possible as it conflicts with the other code? In which case we might have to settle for having the first tab open. If you get a sec please do let me know your thoughts and thanks again for creating such a great tutorial!

    -R

    Reply
    • Ania Romańska

      I’m not sure if this is what you arer after, but I explain how to add the scroll-down effect at the end of this blog post 😉

      Reply
  65. Marko Macun

    Hello Ania,

    Amazing, really! Works like a charm, except when I want to add a Divi slider to the content. The problem is in the image of the first slide, which does not show. When the second slide follows, everything is ok even when it comes around the first slide again. This happens every time I click on another tab.

    I can share a link to the website if it helps…

    I’ll be very grateful for any assistance and help with this problem!

    Reply
  66. Darryn

    Hi Ania

    This works great thank you.

    However is it possible to have the 4 blyrb tabs at the top of the page, then further down after some more content having 2 more blurb tabs sharing 50% of the row each?

    Reply
    • Ania Romańska

      Hi, yes, it’s possible, the simplest way would be to duplicate the code and change the class names on the second section. The CSS width of the Blurb modules would need to be changed as well (for a two column layout).

      Reply
  67. Dwayne Dobson

    Hi Anna, I was relieved to find your tutorial. However when I add the display none code my sections are still visible.

    I have even tried adding !important tag.

    Reply
  68. zumer

    hello, thanks for great video.

    i have two questions: is it possible to have no H. titles at all instead of titles je blurb (e.g. here it would be 4 x H4) but only normal paragraph text. Without having H1-H6 in source code?

    nr. 1 Can I add dynamic things to the hidden blurb, e.g. Woocommerce product description. If I do this on your sample layout the following blurbs will not work anymore.
    thanks

    Reply
  69. Louise

    Hi,

    Is there a way to get the tabs to horizontally scroll on mobile instead of stacking on top of one another?

    Thank you 🙂

    Reply
  70. Ashton

    Hi,
    When i remove the code from the page and add to stylesheet and integrations css as instructed the tabs no loner work.

    Could you help please?

    Thank you 🙂

    Reply
  71. Matt Dany

    Hi Ania,
    Is there a way to create a link for each “tab”?
    I mean, if I am on an other page and I click on a specific link I will arrive on the page with the 4th tab open for example.

    Reply
  72. Daniel

    Hi Ania,

    I am trying to make one tab open on page load. How do I do that? I tried to put the css code you have in but it still does not work? Do I have to edit the JS?

    Ps. Thank you for this, the video was awesome and it worked perfectly for my site.

    Reply
  73. Diana

    Hi Ana, this is working great so far but I needed 6 tabs so I copy and made sure the Ids are tab5 and tab6. When I refresh the browser the first 4 tabs show going down the line but the last 2 are not. Where do I find that setting to change that?
    Page is. https://dwgates.dndesignaz.com/gallery/

    Reply
    • Diana

      Never mind, I finally found the solution.

      Reply
  74. Nicolas

    Hello Ania,

    Divi animations seems to be inactive when title’s content is deployed while they works well on normal pages.

    Did you ever encountered this problem ?

    Do you know how to fix it ?

    Reply
    • Ania Romańska

      Yes, it is how it works unfortunately, the animations inside thehidden section aren’t visible. I will work on a new version of this layout in a while, so maybe I’ll find a solution, but for now I won’t be able to help you with that, sorry.

      Reply
  75. Rob Taylor

    Hi Ania,

    I am having a small issue with my site. There is a problem with the tab url, it doesn’t show. 🙁

    I think it is to do with the ‘title link url’ and the ‘module link url’

    I am using the ‘title link url’ as it makes everything work. Do you know what this could be? Maybe I have to tweak the javascript?

    https://gorilla.co/product/pricing/

    Reply
    • Ania Romańska

      Yes, the URL is hidden, it is not just you, it’s how it works. I will work on a new version of this layout in a while, so maybe I’ll find a solution, but for now I won’t be able to help you with that, sorry.

      Reply
  76. John

    Ana thanks for this wonderful information on TABS. I registered but cant seem to get access to download the Jason file. Can you please email it to me ?

    Many thanks

    john

    Reply
  77. Jennifer Fischer

    I really love what you have done with this section but I am unable to get it to function on my site. I have copied and pasted from your tutorial and have compared your demo page, unsure what is missing here. Can you assist me with this?

    Thanks!

    Reply
    • Ania Romańska

      If following the steps doesn’t work, please try importing and tweaking the JSON layout instead.

      Reply
  78. Ashton

    Great thank you.

    Is there a way to change the code so that on mobile the blurbs scroll horizontally rather than vertically stacking on top of each other?

    Reply
  79. Ashton

    Hi Ania,

    This is great thank you! 🙂

    I am having one slight issue – When I first load the page all the blurbs are visible.

    Could you help me to resolve this please?

    Reply
  80. ashton

    Hi Ania, this is great!

    I have downloaded your free layout, although when i first go to my page all the blurbs are visible. If i then click a tab they are correct.

    How do I fix this please?

    Reply
    • Ania Romańska

      In your CSS you are missing a closing bracket } after /* Reduce icon bottom margin */ – this makes the rest of the CSS not working 😉

      Reply
  81. Dagmar Brewig

    OH Thank you so much for this! What an awesome way to use the blurbs!

    Reply
  82. Kara

    Hi Ania! Thanks for this tutorial, it works great! I have a question though. Is there a way to display the first tab when the page loads, instead of needing clicking into one?

    Reply
    • Ania Romańska

      It’s explained at the end of the post 😉

      Reply
  83. David Barczak

    Hi Ania,
    This is a wonderful resource! Thank you! Is there anyway to click on a link and open one of the blurb tabs. I would like to include it in my navigation.

    Thanks

    David Barczak

    Reply
    • Ania Romańska

      Hi,
      That would require some additional JS – to change the click event for the menu item and also trigger this event on the page load (when on that page). I’m sorry, but I won’t be able to give you the exact code, I haven’t tried it myself.

      Reply
  84. Elena

    Hello Ania, thanks for the amazing tutorial, it saved me!
    I’m trying to add the animations like you did in the end, but I can’t make it work. I tried adding them with Divi to the section, row or module, but each time, when the section opens, everything is already displayed. What am I doing wrong?

    Thank you!

    Reply
    • Ania Romańska

      Hi Elena, I’m afraid the section animation doesn’t work with the latest Divi version.

      Reply
      • Elena

        All right, at least I know I tried. Thank you for your reply!

  85. Nicolas

    Hello Ania,

    First I want to thanks you for this wonderfull tutorial that works very well.

    I have a big problem with it :

    when I resize my screen in order to test tablet size.

    As my Tab’s names are long, I have different blurb heights on tablet’s screen.

    Should you tell me how to correct this problem ?

    Best regards

    Reply
    • Ania Romańska

      Hi Nicolas, you would most likely need to add some CSS and set the blurbs title container min-height using the media query for for the problematic screen size.

      Reply
      • Nicolas

        Thank you Ania, Now It works perfectly

  86. David Fiegel

    Hi Ania, thank you so much for this tutorial, worked out perfectly.

    But I wanted to add 1 section and changed the width to 20% but it sets the new section under the 4 previous ones?

    Cheers David

    Reply
    • Ania Romańska

      Hi David, can you share a link?

      Reply
  87. Samxd17

    Hi Ania,

    Loved your post, works nices for me but, I would like to experiment a little more with this awesome tricks and codes … how I could do this?: when clicking on the active tab again, close or hide the open section. I think it’s with jquery, could you help me? What line of code should I add and where? My Jquery is in diapers (I have to keep learning), I get along better with css.

    Thanks in advance! 🙂

    Reply
  88. Evans

    Hi Anie, thank you for this tutorial, i am stuck at stage 3, i have used this code
    .tab-content {
    display:none;
    }
    but unfortunately nothing is changing

    Reply
    • Yana

      I´m stuck there too… I don´t know what to do anymore. Please Ania, reply this.

      Reply
  89. Brian

    Amazing post! It works perfectly!

    About this bit of js code which scrolls to the top…

    $(‘html, body’).animate({scrollTop: $(section_id).offset().top}, 1000);

    How can I make that only trigger @media (max-width: 767px )?

    I don’t understand how to target in CSS or if I even could. It works nice on mobile and tablet but gets in the way for me on laptop and desktop.

    Any simple solution?

    Thanks!

    Reply
    • Ania Romańska

      I’m sorry, I don’t have the exact code you’d need to use, but you might find this article helpful.

      Reply
  90. Giannis

    Hi Ania,

    i have a single-page website so i used the jquerry code in a code module. I use 3 blurbs for tabs. When i press the first blurb, i suppose it is working, but when i press the second or the third, it is just scrolling me up some pixels..

    i hope you can help me to fix it please…

    Reply
    • Ania Romańska

      Hi, check if you’ve added the #tab1 to the “link URL” and not the module link.

      Reply
      • Giannis

        Thank you very much for your response, i found my mistake,
        i forgot to add the CSS Class: tab-title!!!

        it works perfectly now!

  91. Juan

    Hi, I was going through this tutorial and i found myself wondering how to go about positioning or making each tab appear under the each corresponding tab on mobile?

    Reply
    • Juan

      I meantwhat would be the media query for the java script on mobile to appear below each tab?

      Reply
      • Ania Romańska

        Sorry, but I don’t think this would be easy to achive, should be possible with custom JS, but you might want to consider changing the section to a different one on mobile, which would be a simpler solution..

  92. Trace Thomas

    Hi, I have downloaded your layout as a starting point, and have added the code in the positions indicated, but the tabs do not open when clicked, the show the colour change but nothing else. I haven’t changed or edited any thing yet as I wanted to see it work out the box first.

    I also tried to create my own from the tutorial and came across the same issue. with the added issue of the flex box forcing the row to go to about 1 quarter of the width required.

    Reply
    • Ania Romańska

      Hi! I just tested the JSON file with the latest Divi (4.3.2) and WP (5.3.2) and it works out of the box, so I’m afraid it must be something on your end. I can see that you just joined our FB group – please share a link to your site there, so we can try to help 🙂

      Reply
  93. abdul karim

    here is indentation error in 8 line please solve it

    jQuery(document).ready(function($) {
    /* Blurbs as Tabs */
    $(‘.tab-title’).each(function () {
    var section_id = $(this).find(“a”).attr(“href”);
    $(this).find(“a”).removeAttr(“href”);
    $(this).click(function() {
    $(this).siblings().removeClass(“active-tab”);
    $(this).addClass(“active-tab”);
    $(‘.tab-content’).hide();
    $(section_id).show();
    });
    });
    });

    Reply
  94. eric

    hi i would like since i like your tutorial above see if you provide remote assistance and help with development of website ? i will be needing some support and little bit a script development i believe ..
    My website is voyage.andseleqt.com
    and i would like to develop something similar than this and i am not an expert in dev so i use divi but i have my limit

    Let me know
    Im based in Bangkok

    The website i wish to have some similar feature is this one : https://www.lightfoottravel.com/en
    search module needed
    Load more module
    etc…

    Development needed i believe

    Can you send me your fees if you do something like this ?
    Would be interesting to discuss if you have time and depends where located

    Reply
    • Yana

      Hi… My name is Yana, I saw your website and it´s perfect. Congrats. I just wanted to know how you made your form section in the contact page. Did you buy a pluggin or you did it from scretch. Can you help me do it the same way? Thank you.

      Reply
  95. Abdul Karim

    hello,
    my name is Abdul Karim, I used your all codes same as it, but output didn’t come like your output, please guide me,

    Reply
  96. Senne

    Hey Ania,

    Thanks for the amazing tutorial. I’m using a premium plugin now to convert any section into tabs. The principle is amazing, but the developer is not responsive at all. I’m having huge issues now as it’s not compatible with the latest Divi version…

    That’s how I came across your website and this specific tutorial, also your Divi Toolbox plugin which I will probably buy today or tomorrow as it’s amazing and has tons of functionalities of various plugins into one!

    I do have a couple of questions:
    – First of all, I did follow the steps to have an active tab on page load, but it won’t work for some reason. I added the classes to the section as well as the corresponding blurb, then I added .tab-open {
    display:block;
    }, but nothing happens…
    – Secondly, I would love if you could actually implement this in the Divi Toolbox, and also give some design options, like so it looks like actual buttons. Would love to discuss this via email or something.

    Thanks in advance.

    Kind regards
    Senne

    Reply
    • Senne

      Oh, and I forgot to tell you, I have animations in my tab section modules, but they don’t work.

      Reply
    • Senne Trenson

      EDIT: I was able to make this work, but it only works if you put the CSS in the page custom CSS section or the site-wide custom CSS section. (So not if you’re using the Code Module)

      Also, I wasn’t able to change the width, but after moving the CSS to the page Custom CSS section, it does work too!

      Reply
  97. Liam

    I’ve just completed your tutorial without any issue and I just wanted to say thank you very much. Using your code as a guide but changing certain things has allowed me to create something quite unique. You have really helped me out!

    Thanks again.

    Reply
  98. MatzUp

    Hi, great idea.

    I can´t import the json file. Is is compatible with the latest divi theme?

    Regards

    MatzUp

    Reply
    • Ania Romańska

      It should be imported directly onto a page, not in the Library (as per instructions 😉 )

      Reply
  99. Arnaud

    Hi Ania, Great tutorial, thank you ! 😉
    There is one thing missing tho : How to preload the first tab ? I can see in the comments I am not the only one asking… Can you puh-lease help us ?? I tried this :

    $( window ).load(function() {
    $(‘.tab-content’).addClass(“active-tab”);
    });

    But couldn’t make it work…

    Reply
    • Ania Romańska

      It is explained at the end of this blog post 😉

      Reply
  100. Nimantha

    Thanks for your great work. I have followed everything. All good but first tab I want to be opened by default. Unfortunately, it doesn’t work. I have copied the code .tab-open {
    display:block;
    }

    Any tips Ania? Thank you

    Reply
  101. Inet Kemp

    And the page where I am asking you to please look is on the contact page

    Reply
    • Ania Romańska

      Hi Inet,
      Every row in every section has the ID of tab1 and tab-content class – you should remove that. And there is an issue with the quotes in your code – check the lines 6 and 11 in the custom-scripts.js file and replace the quote symbols.

      Reply
      • Inet Kemp

        Thank you Ania. It looks GREAT now!

  102. Inet Kemp

    Hi Ania
    I hope you can help please.
    I’ve put this into my active tab, then it shows when loaded

    display:none; display:block;

    But whenever I click on another tab, all tab contents dissappear and nothing shows up again.

    If I put this in the style.css file, no tab contents show at all

    Reply
  103. Nina

    Hello! Thank you so very much for this tutorial—it’s great!

    I’m just having what I think is one issue… On page load, the content on /example-county/ renders appropriately, with the designated active tab showing and all other tab content being hidden. However, when switching to other tabs, no content is showing—and when switching back to the initially active tab (“County Profile”), that tab’s content is now hidden even though it was showing on page load. The content for all sections is supposed to be like that on the /beaufort-county/ page (which does not yet have “tab-content” classes implemented, just so it’s easier to see what’s in all the tab sections without switching to wireframe view). Would you be able to help me troubleshoot the issue?

    Thank you so very much in advance!

    Reply
    • Ania Romańska

      Hi Nina,
      Please try moving the links (#tab1, #tab2..) from the Module URL field to the Title URL in the Blurb settings.

      Reply
      • Nina

        You are incredible—and a lifesaver! Thank you so very much. This worked like a charm 🙂

  104. Arun

    Thank you for the brilliant tutorial. Kindly let me know how to link/open a tab from another page.
    Thanks again

    Reply
    • Ania Romańska

      It would require custom JS, which would be based on custom URL parameter. Won’t be able to share the exact code, sorry.

      Reply
      • Arun

        I understand.. thank you.

  105. Lukas Schorn

    Hi Ania, Lukas here. I saw your tutorial which was exactly what I was looking for. I followed all your steps, integrated the jQuery logic, but unfortunately I does not work properly. Could you please just give it a quick look, in order to help me out! Would be awesome!! Thank you very much!
    Lukas

    Reply
    • Ania Romańska

      Hi Lukas, the link (#tab1, #tab2…) needs to be added in the “Title link URL” and not the “Module Link URL”. I think this is your issue here.

      Reply
      • Lukas Schorn

        Hi Ania, thank you for your reply! Ok, I just changed the title link url as you said but unfortunately it still doesn’t work…Can you guess what could be the problem? Pls help me out, thank you!
        Best regards, Lukas

      • Ania Romańska

        I don’t see the JS code added on your page.

      • Lukas Schorn

        Ok, now it works, problem resolved! Thank you very much!!

  106. Andrea Rodriguez

    Hi Ania,

    thank you for this amazing tutorial!

    I don’t know why in the mobile view I have a white empty space between the third and fourth tab.

    Thank you.

    Regards,
    Andrea

    Reply
    • Ania Romańska

      It’s not possible to guess. Feel free to post a link to your site with that question on our Facebook Group. 😉

      Reply
  107. Rainer

    Hi Ania,

    thank you for this great tutorial! Everything works fine for me, but I have one issue:

    $(this).siblings().removeClass(“active-tab”);

    doesn’t seem to work. When I click an new tab, it leaves the “active-tab” class on what has already been clicked. Is there a way to fix that? Thank you!

    Reply
    • Ania Romańska

      Hi Rainer,
      Did you change the structure of the tabs? Maybe they are not sibling elements any more? It’s hard to guess what could be the issue there. Maybe try downloading the layout and tweaking to your need instead of recreating from scratch..

      Reply
      • Rainer

        Hi Ania,
        uups – that’s just what I did: changing the structure of the tabs. I just changed the structure back according to your tutorial and everything works fine. Thank you so much and thanks again for this great tutorial!

      • Kartik

        Hi, I tried to subscribe and get the layout, but I never received an email on either of the emails that I tried. Not even in the spam folder. Could you please look into this? I just found out about this website and I love all the resources you have so far.

      • Ania Romańska

        If you confirmed your email, you should get a second email mesaage in a minute. If you didn’t get it, you can simply fill the form again, and if you’re already on our list, it’ll redirect you to the download page. Hope this helps.

    • New

      Hi Rainer,

      I had the same problem.
      I removed siblings() and it worked perfectly.

      So the code should be like this :

      $(‘.tab-title’).removeClass(“active-tab”);

      Hope it works for you too!

      Reply
      • Rainer

        great idea, I will try this too – hank for this tip!

  108. Frank

    I love your tutorial as it is slow enough to follow and good for beginners.

    I have one issue: the blurps are clickable everywhere but clicking on the image does nothing, around it and on the text works.

    What could be the issue here?

    Reply
    • Ania Romańska

      Make sure you are adding the link in the “Title link URL” and not the “Module link URL” in the Blurb settings. That is my guess, but if you already added it in a correct place then I would need to see the URL to be able to advice anything 😉

      Reply
  109. Jeremy Tews

    Thank you very much for this tutorial. Easy to follow and worked perfect on a site I am developing.

    Cheers!

    Jeremy

    Reply
  110. oscar

    I ended up downloading the layout and seems to work. The thing that is tricky for me is that in the visual editor the content for each blurb-tab does not show only when I go to the wireframe view.

    Is there a way around this?

    Reply
  111. cnelson67

    Thank you very much for this tutorial. I have a question.
    Once I have built and customized my blurb tabs, how do I include it on my home page? I have tried saving it as a template then adding it to the home page, but all I get is the tabs with no information on click.
    Please advise.
    Here is the link to my Home page if you need to check it out.
    http://91z.6f9.myftpupload.com

    Thank so much again!

    Reply
    • Ania Romańska

      Hi,
      It looks like it works, there are just some additional sections (our work and our team) between the blurb titles and the sections with each tab content.

      Reply
  112. Noe Khalfa

    Hi Ania,

    This is awesome. Thank you so much. I also have two questions to make it work on my site:

    1. Once the tab is open, is there a way to make it so if I click the tab again it’ll close?

    2. On the mobile version is it possible to have the blurb display under it’s own title instead of under all the titles?

    Thanks,
    Noé

    Reply
  113. Matthew Curtis

    Thank you so much for this tutorial….I’m a complete CSS and JS novice and its helped so much.

    I am almost there with my website, but I seem to get a white space at the top of each tab and I can’t understand why.

    https://cryfc.co.uk/auto-draft/

    Reply
    • Ania Romańska

      Hi Matthew,
      It’s the bottom margin on the Row in the first section on this page (the one above the Blurbs) 😉

      Reply
      • Matthew Curtis

        Thanks for your quick response, I’ve played with the margins and it doesn’t seem to have fixed the issue

      • Ania Romańska

        You simply need to remove the 8px bottom margin (in the Row settings), replace it with 0. If you need more space at the bottom, use padding instead.

      • Matthew Curtis

        Ahh ok, I think we are getting our wires crossed. If you click on each tab, there is a white space that increases in size between tab and content.

      • Ania Romańska

        You’ve added the tabs IDs to text modules and not sections, only the tab2 is correctly set up.

      • Matthew Curtis

        Thank you so much, seems to be all working now.

        Is there CSS code that will change the Blurb title and Icon colour on hover as well?

      • Matthew Curtis

        Thank you so much, all working now 🙂

        Is there a way of using CSS to also change the blurb title and icon colour on hover also please?

  114. Federico Martorana

    Hi Ania, thanks for the great resource!
    I have an issue with the automatic scroll option, I added the jquery line as explained, but it doesn’t work. On my browser it seems that it doesn’t work on your demo page either. Any suggestions?

    Reply
    • Ania Romańska

      Which browser are you using Federico?

      Reply
      • Federico

        I’m using chrome, on desktop and mobile version.
        I tested also firefox and it doesn’t work.

      • Ania Romańska

        Our main demo page doesn’t include that code, but look here, it works both in Chrome and in Firefox, so it has to be something on your end I’m afraid.

  115. gcs075

    All was fine, now one of the tabs has become slightly larger than the others, creating a gap above and below the other tabs. Any advice about how to rectify this and avoid it happening in the future would be appreciated. The page is under construction at https://radico.de/?page_id=28574. Thanks!

    Reply
    • gcs075

      Solved. It was because the text had wrapped on to two lines whereas the other blurbs only had one line.

      Reply
  116. Tope

    Hi, thanks for this good work. really works great.

    How do I make the first tab visible while I load the page and when I click on other tabs, the first tab disappear while others loads

    Reply
    • Ania Romańska

      It’s explained with the code example at the end of the post 😉

      Reply
      • Tope

        Wow thanks a lot, it worked perfectly.

  117. Sara Sanguino

    Great tutorial. I followed to a T but the Jquary seems to not be working

    Reply
    • Ania Romańska

      Hi Saram, where did you add that JS? I can’t see it in your page source.

      Reply
  118. Mann

    Hi ANIA, thanks for that good solution. I followed your guidance step by step but here i got error “please use tab for indentation”. How i can fixed it please help me.

    Reply
    • Ania Romańska

      Where do you see that error? If you are having trouble fallowing the step by step instructions you can always download and import the free layout.

      Reply
  119. Alejandro

    Thanks! I am a web developer enthusiast and your tutorial helps me a lot. I only want to send some love, thanks for all!

    Reply
  120. Heather

    Hi Ania – thanks for this tutorial, it’s awesome! I’m having an issue with the link not working correctly if the cursor is over the Title text or icon, rather than over the background.

    I’ve included the #tab1 link in both the Title Link URL and the Module Link URL, because without doing both, it doesn’t function at all. Do you have a fix for this issue? Thanks so much!

    Reply
    • Heather

      The site also jumps down every time a link is clicked – is there a way to stop this issue as well?

      Reply
    • Ania Romańska

      You didn’t add the JavaScript code (it is not loaded on your page, that is why it doesn’t work). The Title Link URL is where you should add #tab1 link.

      Reply
  121. chan

    is there a way to move the tabs to the bottom instead of the top?

    Reply
    • Ania Romańska

      You can simply change the order of sections using the Divi Builder drag&drop functionality 🙂

      Reply
  122. Jean Carr

    Links not working on iPhone (mobile) and probably on Tablets. Loved all about this post, Ania. I am using your jquery code with new Divi version 3.27.4 with hover effects. Go to the link provided on computer. Everything works. Go to link with a smartphone and the links are not active, not working. Do you know what might be happening and how to fix? Thank you.

    Reply
    • Ania Romańska

      Your desktop version doesn’t seem to be working either. You have JS error, you should not defer the jQuery script.

      Reply
  123. Mark

    Hi Ania, great post! everything has worked great so thank you!

    I do have a question though, I have used images instead of icons and I wanted to have the image change to another image when the blurb is clicked and the section is active, could you tell me how to do this?

    Thank you in advance!

    Reply
  124. Peacecamper

    I’m looking for a way to link from another page to a specific tab, can you help me with that?

    Reply
  125. Jae

    This is great. But I cannot load the json file. When I try importing it into my Divi Library (I’m guessing that’s what I’m supposed to do with it?) I get an error message, “This file should not be imported in this context.” Am I missing something?

    Reply
    • Ania Romańska

      Please follow the instructions provided on the download page – you need to load the JSON file directly on the page and not in the Div Library.

      Reply
  126. Luis Guzman

    Hello! Thank you for this amazing tutorial.

    I wonder if is possible to make a toggle effect, so if press once, the tab block appears

    If press twice it disappear.
    So far there is always one displayed.

    Reply
    • Luis Guzman

      I was able to tweak a little the jQuery and CSS to get this working as I was mention.

      As far as jQuery might wanna test to change this block:
      $(this).click(function() {
      $(‘.tab-content’).not(this).hide(“slow”);
      $(section_id).toggle();
      });

      Cheers!

      Reply
      • Joe D

        Hey Guys!

        GREAT POST Ania!! Love your work 🙂

        Just to build off of what Luis said here — This is how I managed to get the current section to slide toggle and the other sections to hide.

        jQuery(document).ready(function($) {
        /* Blurbs as Tabs */
        $(‘.tab-title’).each(function () {
        var section_id = $(this).find(“a”).attr(“href”);
        $(this).find(“a”).removeAttr(“href”);
        $(‘.tab-content’).hide();
        $(this).click(function() {
        $(this).siblings().removeClass(“active-tab”);
        $(this).addClass(“active-tab”);
        $(section_id).slideToggle();
        $(‘.tab-content’).not(section_id).slideUp();
        $(‘html, body’).animate({scrollTop: $(section_id).offset().top}, 1000); });
        });
        });

    • Kat Zarabanda

      Hi Anya!
      thank you so much for your tutorial I really love it and I’ve actually already implemented it.
      I’m not sure if anybody has asked you this, that is it any way to disable the jQuery line that sets the smooth scroll to each section?
      It turns out it works really good on mobile but doesn’t look good in the desktop version so I might need to disable it for desktop.
      Thanks so much for been so generous with your knowledge.
      Cheers from Mexico.

      Reply
  127. Deon

    Hi Ania, thanks so much for this!

    Its working great, the only issue I have is that when I have added the extra classes and css to make one tab open on page load, it will show the first tab content on load – but when clicked on the blurb again the content disappears?

    Thanks in advance, your help is appreciated.

    Reply
    • deonknoes

      The previous problem has been resolved. Thanks. I would like to know how I would add padding between the blurbs, but to still have them aligned with my content grid? Gutters are set to 1, and if I change, the lat blurb moves down. Thanks

      Reply
    • Helen

      Hi Deon,

      I have the same problem. How did you solve yours?

      Thanks for your reply.

      Reply
      • Emily

        I’m also having this issue. Any tips on how you resolved it?

        Thanks!

      • Karl

        Heya team, I had the same issue, found it was because I added the #tab1, #tab2 etc. to the MODULE Link. It needs to be on the TITLE Link to work

  128. Caitlin

    How do I change the column width of each blurp, so it’s possible to put more blurps/ columns next to each other?

    Reply
    • Ania Romańska

      You’d need to adjust the CSS code.

      Reply
  129. daniel

    T H A N K S ! ! !
    Fantastic! Works without expensive plugins!
    Great job!

    Reply
  130. Van

    Hi Ania,

    Thanks for the tutorial! I have a question.

    I have 2 rows of 8 tabs each. How do I remove the ‘active tab’ on the 1st row, when I click on a tab in the 2nd row?

    Because the background color of the active tab on the 1st row stays when I click a tab on the 2nd row.

    Thanks a lot!

    Reply
    • Ania Romańska

      I’m sorry, but this code is not going to work with multiple instances on one page, you’d need to modify the JS.

      Reply
      • Van

        I figured it out!

        Made 3 different scripts for each row and changed

        ‘this’

        to

        ‘css class of each row’

        Thank you so so much Ania! 🙂

  131. Webmediacy

    Hello, great tutorial, but I could not get it to work at the jQuery part.

    I have checked and rechecked everything, I copied and pasted but it still does not work. I checked for jquery conflicts, there was an error page with dealing with Divi Booster, I deactivated the plugin but not better.

    Thanks for your help!

    Reply
    • Ania Romańska

      Instead of trying to recreate the steps – try importing the JSON layout and tweak it to your needs.

      Reply
  132. Rumy

    Hi,

    A bit of a weird issue – if I understand the code correctly, the following part should remove the “active-tab” class from previously clicked blurbs when I click on another blurb:

    $(this).siblings().removeClass(“active-tab”);

    However, it doesn’t seem to work. When I click away, it leaves the “active-tab” class on what has already been clicked. Is there a way around that?

    Reply
    • Rumy

      Please ignore! Figured it out. 🙂

      Reply
      • Vojtěch

        Hi,
        I have same problem like you, but i can´t figured it out.. I still have active tab only at first section and at click on another section status don´t change. What was trouble in your case? Only different can be using buttons instead of blurbs, but the JS code is modified and showing content at click work´s perfectly.
        Thank you so much for response!

  133. Kristen

    This is great and working perfectly, thank you! I want to link to these tabs from another page (in other words, one button would link to tab 1, another would link to tab 2, and so on). I can’t get this to work and think maybe I’m not giving the right element/module the class id? How can I achieve a link to any open tab?

    Reply
    • Ania Romańska

      You’d need to add more JS, to open the tab (make section visible) on page load based on some parameter in the URL.

      Reply
      • Kristen

        This is beyond my expertise. Any more specific instructions you can give me?

      • Kristen

        Can you please help? I don’t know how to write JS, so I can’t do anything with your response. Can you be more specific? I have been searching online for possible help, but since this uses sections – and all I can find is references to tabs and accordions – I don’t know how to adapt for this situation. Thank you!

      • Daniel

        Thanks for your Comment. Interestingly I found the comment from Kristen. I have the same question. How is it possible, to link directly to a specific tab, so that the active tab would be the tab, the visitor is landing on. I Think some hints would be fabulous. Nevertheless, your tutorial is really fantastic. Thanks!

      • Karl

        I got this working, just can’t figure out how to set the tab as active. But works for my application, might be of some help to someone else?

        jQuery(window).on(‘load’, function($){
        function loadPerson() {
        var url = window.location.toString();
        var id = url.substring(url.lastIndexOf(‘#’));
        jQuery(id).show();
        jQuery(‘html, body’).animate({scrollTop: jQuery(id).offset().top-100}, 1000);
        }
        loadPerson();
        });

  134. Ozki

    Can I use buttons or text (ul) instead of blurbs?

    Reply
    • Ania Romańska

      Yes, but with buttons you’ll need to modify the JS, as it looks for a link inside the module and the Button module is a link.

      Reply
  135. marine

    Hello,

    How can I remove the hover effect ? I don’t want it
    Thanks

    Reply
    • Ania Romańska

      You’d need to remove the corresponding part of the custom CSS code.

      Reply
  136. Adam Wills

    This is an excellent tutorial, but I cannot get it to work. I followed this tutorial several times over and double-checked my work. Everything seems to be reflected properly except the jQuery isn’t executing properly. I even downloaded and installed the layout template, and same result. Any ideas?

    Reply
    • Ania Romańska

      It’s most likely some JS conflict. Check your browser inspector if there are any JS errors in the console.

      Reply
  137. Jonathan Baldwin

    Hey Ania,

    Brilliant tutorial, thank you. I am trying to find a way to turn tabs into toggles (or an accordion) on a mobile… so that the content displays directly below each tab when it is activated, instead of displaying at the bottom of all the tabs. Would this be possible with your code?

    Reply
    • Ania Romańska

      No, it wouldn’t be possible with this code, it would need to be modified or a completely different layout structure would need to be used.

      Reply
  138. Rumy

    Thank you for the great tutorial, Ania! I was looking to use the Person module instead of the blurb module but I was wondering, does the person module link act differently than the blurb? I click the person module and nothing happens.

    Reply
    • Ania Romańska

      I think the difference is in the link – the Person module doesn’t include any link by default, so you’d need to include a text link in the description or modify the JS.

      Reply
  139. Arundhathy

    Is there a way of making the blurbs/tab display like an accordion on mobile, so that the blurbs open below the relevant tab and not below the bottom tab?

    Reply
  140. Samantha

    Hi Anna,

    Thank you for this amazing, in depth tutorial! I have followed the video several times and worked on the code. For some reason, I cannot get the modules to show? Any suggestions?

    Reply
  141. Karthikeyan

    Hi Ania,

    Thanks for the tutorials. can we make the tabs switch to next tab on some time intervals and make them stop on mouse enter and mouse leave. Is it possible?

    Thanks

    Reply
  142. Iggy

    Hi Ania,

    excellent idea and solution.
    I’ve done all that you have with success but i have a problem with animating my sections when i click on coresponding blurb. I tried animation on whole section and on elements in that section and nothing works.
    Do you have any advice what should i do or try?

    Thanks in advance,

    regards

    Reply
  143. Egor

    I loved your lesson! It’s almost what I was looking for. Tell me, what would it look like if the tabs are on the left (vertically), and the content to the right of them ? Is that possible? it is possible tab1 tab2 tab3 tab4 to register the modules, and not sections ? That is, there will be one row with 2 columns, in the first column there will be modules “blurb”, and in the second there will be modules “text”. Right ? Here’s an example of what I want to do: https://themes.bestdivichild.com/business-pro/#

    Reply
  144. Michal

    Hi Ania,
    Thanks for this excellent tutorial, the result is beautiful and elegant. I was just wondering, is there a way of making the blurbs/tab display like an accordion on mobile, so that the blurbs open below the relevant tab and not below the bottom tab? (I have five on my page)
    Many thanks,
    Michal

    Reply
  145. Robert Young

    In your “How to make one tab open on page load?” section, you are missing a dash in this part in parenthesis “(it will have both: tab-title active tab)”… “active tab” should be “active-tab”. I was copying and pasting so couldn’t figure out why it wasn’t working. Glad I looked closer. Thanks for this though!!

    Reply
    • Ania Romańska

      Thank you, Robert, for letting me know!

      Reply
  146. DANNY ABRAMOV

    Hi Ania,

    What if I want to use images instead of icons? At the moment, when I try to use images, and remove the tab title, there is a large margin below the image, and its not centered properly.

    What class should I use to control the image I use instead of and icon?

    I tried .et_pb_main_blurb_image but it doesn’t work.

    Thank you for your help and awesome tutorial!

    Reply
    • Ania Romańska

      It’s hard to advice without seeing the page live, but the .et_pb_main_blurb_image is the container that has the 30px margin bottom added, so removing this should help. To target the image itself you could use .et_pb_main_blurb_image img

      Reply
      • DANNY ABRAMOV

        Problem fixed, thank you!

        One more quick question. I would like the first tab from the left to be open from the start. What needs to change in the code for that?

  147. Krzysiek

    Hi there. Is there any option to hide a tab (all tabs) by clicking the title/icon?

    Reply
    • Robert

      My client is asking for this now… Help! =D

      Reply
  148. Regina

    Hi Ania,

    can I do all the modifications in the Customizer of the Divi Theme or do I have to install a Divi Child Theme?

    Reply
    • Ania Romańska

      Yes, you can add your CSS in Theme Customizer, or keep it in the Code module. And you can add JS code to the head of your website via the Integration Tab of the Divi Theme Options. You do not need a child theme.

      Reply
  149. Tain

    Hi Ania

    Could you please explain this in a bit more detail for me?

    How to make one tab open on page load?

    I have seen your answer above, but still can’t get it right.

    Thank you

    Tain

    Reply
    • Ania Romańska

      I’m sorry Tain, I don’t know how else I can explain it other than what I’ve already written in the post – https://imgur.com/G7VdraH.

      Reply
  150. Łukasz

    Hi Ania, Thank you for this superb tutorial. I had a need to create more blurbs than you (8). And small problem I have is that when I resize page (when it’s still not mobile size but tablet, then some text titles of blurbs are going out of borders. How can I fix it?

    Reply
    • Ania Romańska

      Hi,
      You would need to add a new media query targeting the problematic screen size you and alter the blurb-tabs width or font size inside it.

      Reply
  151. Ahmad

    How di I make the first tab defaultly appeared without need to toggled it first?

    Reply
    • Ania Romańska

      It’s explained in the end of the post.

      Reply
  152. David McLeod

    What an awesome video, AND blog post. This is one of the best tutorials I’ve seen recently. Thanks so much for posting this!

    Reply
  153. Bernd

    Hi Ania, thanks for that good solution. My question is what i have to change on the script, if i want to show different background-color for each active tab?

    Reply
    • Jack

      Hi Ania, thanks for this nice option ! I have the same question as Bernd.. could you tell us how to have different color for each tab activated? many thanks!

      Reply
      • Ania Romańska

        Each blurb would need to have an additional CSS class (ed. tab-title tab-red) and then you’d need to add some CSS to target that tab, when it’s activated, something like:

        .tab-title.active-tab.tab-red {background:red;}
  154. Carsten

    Hello Ania,
    thanks for this great solution. It helps me a lot.
    I’m working with your solution now for a few weeks. Everything was great.
    At the moment it seems that the new Divi update makes trouble. Here on my site, you can see how I implemented your CSS with my work.: https://www.eloorac.com/transportgestell-modelluebersicht#drawings

    As soon as I install the update 3.19.2 of Divi and then save the page, the page is no longer accessible in the frontend. do you have any idea why?

    If I undo the Divi update to 3.19.1 and save the page again, everything works again.

    Just to be on the safe side: The problem is only on this page: https://www.eloorac.com/transportgestell-modelluebersicht

    Thanks for your help
    Carsten

    Reply
  155. Brian

    Great tutorial and a very useful setup. I wound up using it here: https://nativebusinessmag.com/summit/ but increased it to 6 tabs with some slight modifications to the code. Thanks again.

    Reply
  156. Jonathan

    I love your tutorial!!!

    I am using it on my HR and upcoming payment forums, jusy wondering if i can use the blurb tab system on the same page multiple times to reduce scrolling, its awsome you rock!

    Reply
  157. Robert

    I can’t get this to be responsive on mobile. Any thoughts?

    Reply
  158. Robert Young

    This might be an issue with WordPress 5 and Divi but i’m working on a client site and trying to use this and the text boxes for inside of the tabs keep disappearing. I can add a new one to put content in the box but as soon as I put in the class to connect it to the tab, it disappears completely. Any ideas?

    Reply
    • Sandra

      i´ve got it : )

      Reply
      • Wendell

        Hi Sandra, I had the same question. What did you do for this one? Thanks!

  159. Jet

    Hi Ania,

    Many thanks for the great tutorial & free layout! I am so close to my goal, but without a quick fix for the following, I couldn’t use the free tabs layout for my project.

    Is it possible to add CSS ID # to each tab, so when someone click a link (for example, https://demos.divilover.com/blurbs-as-tabs/#develop) from other pages, they will be sent to the tabs page with the specific tab (in this case, it will be ‘Develop’ tab) open by default? I tried googling for an answer for many days but still no luck. I know some CSS coding but not the jQuery thingy. 🙁

    Reply
  160. Sheila Hoffman

    Thanks for this tutorial and for the free layout. I feel bad asking for support for something that is freely offered. I’m typically good at following these things but for some reason I’m not getting this. I have a dev site test here https://staging1.roamconsultingllc.com/testing-tabs/

    After importing and adding content and setting the classes I saw all 4 blurbs at once in two rows. That was before I added the js and css. Once I did that I now only see the one. I’ve put the js in the header as instructed with the open/close script tags and I’ve added the CSS. Before I can even begin to work on styling for this site I need to get this working. I can’t figure out what I’ve missed. Thanks for any help.

    Reply
    • Ania Romańska

      Helo Sheila,
      The easiest way to get this to work is by downloading and using the sample layout. It works and you’d just need to change the content to your own..

      Reply
  161. Syed Muneeb Ali

    Hi,
    I’m doing all same and it is working good before jquery part. I’ve just copied your codes but still it’s showing tabs on click.

    Help!

    Reply
  162. Mark Muthii

    Hey Ania!

    Thank you for the great tutorial and awesome freebie.

    Perhaps an addition to anyone who might need it: you can animate the closing and opening of tabs by adding a speed parameter to the jquery show() and hide() functions.

    So, adding 1000 (this is in milliseconds) as a parameter, like so:
    $(‘.tab-content’).hide(1000);
    $(section_id).show(1000);
    will make the tabs show and hide with a smooth transition of 1 second.

    Hope this helps!
    Mark.

    Reply
    • Ania Romańska

      Thank you Mark, that is very helpful.

      Reply
  163. Nicolas

    Hi Ania,
    I´m using your code to display 7 tabs and it´s fantastic!
    Since the titles vary in some screens the height of the tabs it´s different. I need to equalize the height of the tabs so no matter how long is the titles always the tab heights are going to be the same. Do you know how I can accomplish that?
    Thank you

    Reply
    • Nicolas

      Also I want to ask you if there is a way to have one tab open by default? Thank you again!

      Reply
      • Ania Romańska

        Hi Nicolas, it’s explained at the end of the post (right after Step #4).

    • Ania Romańska

      Hi, You can try using the min-height property with some CSS media queries (targeting the titles directly).

      Reply
      • Amy H

        That worked perfectly for me. Thanks!

  164. Tom DiCamillo

    Great tutorial it has saved me a bunch of time. Anyway to pass a parameter to open a specific tab for a referring page? example.com/page.php?tab=1 or example.com/page.php?tab=3

    Reply
  165. Toby

    Hi Ania

    Great Divi Tutorial – I have been playing around with similar using buttons for navigating but this is far more elegant and offers greater styling options. When my business is launched and flying I promise to come back and buy you a coffee!

    Thanks
    Toby

    Reply
  166. Kristoffer

    Hi Ania,

    Great post!
    Regarding to the automatical scroll down, then the link to the test site dont work, so I can se the function. But will it then be possible to link from a different site, to the choosen section? For example, http://xxx.com/blurbs-as-tabs#section2

    Reply
  167. Alex

    Hi! You best!
    But I have question about sections
    We have 4 blur tab1, tab2, tab3 and tab4
    but for all tabs i need one more sections like tab1.1, tab2.2, tab3.3 and tab4.4
    First i need Speciatly section and next standrat section
    Can you say how i can do it? TY

    Reply
  168. Sarah

    Hello, I’m wondering if I could put a photo in the tab rather than text + icon. Theoretically, could this work? I do know CSS and HTML, but haven’t dug into your code yet.

    Reply
    • Ania Romańska

      You can add any Divi Module you like inside a tab, it’s a standard Divi section.

      Reply
  169. Andrei

    Hi!

    I have a problem, the 5th tabs doesn’t show the correct content. It shows the 4th content. Please help me!

    Thanks!

    Reply
    • Ania Romańska

      Blurb link target needs to be the same as section ID (with the #).

      Reply
  170. Andre

    Dear Ania, I noticed that the animation within each tab-content is not starting anymore with a click on the corresponding tab. Only on page load the animation is visible within the active-tab. Your demo site seems to be affected too. I have a feeling that a Divi Update changed something here. Do you know how to fix this. Thank you! Andre

    Reply
    • Ania Romańska

      Hi Andre,
      Yes, I’ve noticed that too, but no, I don’t have a fix for this issue.

      Reply
  171. Alex

    Dear Ania, Thanks for the great tutorial. Is there a way to have the first blurb tab in its selected color on page load? I used white as the selected background color for active tabs, but it wont change until I click on it. Thank you very much! Alex

    Reply
    • Alex

      Sorry, I forgot the “-” in “active-tab”, Doh! Keep up the good work!

      Reply
  172. Manuela

    This is really fantastic and what I was looking for.

    I just want to make a few adjustments but I do not know how. I hope you can help me.

    In my case, the tabs have no background color. So I would like the icon and the title and the circle to change color in hover (instead of the background) How can I do that?

    Another question is whether it is possible to place the title above the icon.

    Thank you very much and kind regards
    Manuela

    Reply
  173. Dana Elza

    Hello,

    Using Divi Theme

    Having difficulty importing the .json layout file.

    I created a custom mime type in mu-plugins . . .

    <?php
    function json_mime_type($mime_types){
    $mime_types['json'] = 'application/json';
    return $mime_types;
    }
    add_filter('upload_mimes', 'json_mime_type', 1, 1);

    and added

    define( 'ALLOW_UNFILTERED_UPLOADS', true );

    to the wp-config.php file

    but I still receive this error message when importing your .json file:

    This does not appear to be a WXR file, missing/invalid WXR version number

    Your assistance greatly appreciated.

    Reply
    • Ania Romańska

      1. Create a new page and activate the Divi Builder
      2. Use the import function to import the page layout onto the page.
      null
      It won’t work if you try to import it directly to a Divi Library and you don’t need any additional functions or edits in wp-config.

      Reply
  174. David

    Wow! This is fantastic and so effective. I’ve implemented it on my own site and it looks great.

    However, editing the tab content sections is proving a pain as I have to use the back end builder. In the Visual builder those sections don’t display at all, even in wireframe mode.

    Is it possible to make these sections show in the VB?

    Reply
    • Ania Romańska

      I think you could add this CSS to your page (in a code module or in page settings):

      .tab-content {display:block!important;}

      Adn then remove it once you’re ready to publish your changes (it should work, but I haven’t tested it).

      Reply
      • David

        This worked a treat. I enclosed it in comments which I can just undo whenever I want to edit the page.

        Nice idea, thanks!

  175. jlconwa

    Hi Ania,

    Thank you so much for this tutorial . It is one of the best I’ve seen – ever!

    A quick question – the tabs look great on a mobile device. However, when you select a tab the content changes below the viewable area on phones. Is there a way to easily scroll down to the center of the content on mobile devices? I just can’t seen to find a solution. Thank you!

    Reply
    • Ania Romańska

      Hi,

      Thank you 🙂
      The scroll-to-section modification is explained at the end of my post here https://imgur.com/a/tdn0L7Y

      And if you’d like to scroll to work *only* on mobile – you would need to look at wrapping the code in condition that will be checking the device width.

      Reply
      • jlconwa

        Thank you! I’m so embarrassed. I can’t believe I overlooked the edit.

  176. Mazhar Imam

    Hello Ania.
    It’s a great tutorial. I applied all the CSS and Javascripts as per your guidance and it’s working fine.
    But it is not going to close when I clicked it again. Am I missed some code or this tutorial doesn’t have any code for closing the tabs.

    Thanks in Advance

    Reply
    • Ania Romańska

      Hi,

      No, sorry, this code doesn’t close the tabs on click.

      Reply
    • Mark Muthii

      Hey Mazhar, hey Ania,

      I made a tweak to the Js code to get it closing the tab upon clicking an already active tab.

      Here it is:

      // Custom code for the blurbs as tabs module
      jQuery(document).ready(function($) {
      /* Blurbs as Tabs */
      $(‘.tab-title’).each(function () {
      var section_id = $(this).find(“a”).attr(“href”);
      $(this).find(“a”).removeAttr(“href”);
      $(this).click(function() {
      if($(this).hasClass(“active-tab”)){
      $(this).removeClass(“active-tab”);
      $(‘.tab-content’).hide();
      }else{
      $(this).siblings().removeClass(“active-tab”);
      $(this).addClass(“active-tab”);
      $(‘.tab-content’).hide();
      $(section_id).show();
      $(‘html, body’).animate({scrollTop: $(section_id).offset().top}, 1000);
      }
      });
      });

      What I’ve added is the if statement that checks to see if the blurb being clicked is already the active one, and if so, removing the active-tab class and hiding the content.

      Hope this helps!
      Mark.

      Reply
      • Alvin Chan

        Hi I tried this code and it didn’t work … any chance that you can help me out? Thanks!

  177. Sheriss

    Hi, thank you for this great tutorial.
    Would the jquery code work with buttons instead of blurbs?

    Reply
    • Ania Romańska

      Hi, no, it won’t work with buttons. The code looks for a link inside the element that’s targeted, and with a button, the link is the targeted element itself (if that makes sense). The code would need to be changed.

      Reply
  178. Matthias

    Hi Anna,

    first of all thanks for your tutorial! I need your advice on the following obstacle. Every selected tab (blurb) has a white background, but if the page loads up the first time, the first tab has its default (unselected) color. Only on click it changes to white. How do I manage to have it in its selected color?

    Thanks,
    Matthias

    Reply
  179. Baladev

    Hi Ania, I love the tutorial and have been using the layout for over 2 months now by your grace THANK YOU!

    But since I have changed the CSS code from [flex-wrap:wrap; TO “flex-wrap:nowrap;”] in this code.

    #blurb-tabs .et_pb_column {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    }
    #blurb-tabs .tab-title {
    width:25%;
    }

    the layout has become irresponsive on mobile is there an easy fix for this? If there is then please share.

    Thanks for the tutorial once again 🙂

    Reply
    • Ania Romańska

      I’m afraid you need the tabs to wrap to new line on mobile, so flex-wrap needs to stay “wrap” for this method to work 😉

      Reply
  180. Mathis Claudel

    Hi Ana ! Thanks for the tutorial, but is it possible to do this with the equivalent of a full page (and thus different sections) ?

    I’d need to create a create a custom tab for 3 different pages as each of them has subcategories, but they all contain different sections.

    Thanks in advance,

    Mathis

    Reply
    • Ania Romańska

      Hi, Mathis. I’m actually writing a tutorial that should help you do what you need, but it works other way around – you would add your tabs to each page as a header (different layouts with different tab active for each page) instead of adding pages below tabs. It’ll be ready after this weekend 🙂

      Reply
  181. epecho

    Ana,

    Thank you! A great design. Is there a way to just point your mouse at the tab to display the content, ie without clicking?

    Thank you kindly

    Reply
    • Ania Romańska

      Yes, this method should help.

      Reply
  182. Scott

    Hi! Great tutorial. Is there a way to implement 3 tabs instead of the 4 tabs? OR is there a way to increase the tabs number?

    Reply
    • Ania Romańska

      Yes, you’d just need to adjust the tabs width in CSS. You can use as many as you like.

      Reply
  183. Steve

    Ania, Great Tutorial. Is there a way to do this by adding the flexbox code within Divi instead of through the browser? I’m not good at this but it seems there should be a way to do this within Divi’s customization capabilities which would make it simpler for people to implement.

    Reply
  184. John Westhrop

    Hi Ania
    You have a lovely way of conveying information; you have a natural flair, probably in the same way you have a flair with CSS and JQuery etc.
    Keep up the good work!

    Reply
  185. Diego Moreno

    Hi.

    Thank you very much for this great tutorial.

    I have implemented it on my website. But I have a problem, clicking on another tab does not remove the active-tab class in the tab that should be inactive.

    Any suggestions?

    This is the website:

    https://www.naequus.clientesdesignar.cl/recetas/

    Reply
    • Ania Romańska

      Hi, it’s most likely caching, as it works fine for me.

      Reply
  186. Steve

    Hi Ania,

    very nice tutorial. On one thing I have a problem. I will pull a row into a module by implementing a tag [showmodule id=”012345″].

    When I use it on the first tab (section) it’ll work fine but when I use it on one of the other tabs its not showing any section. Also when I disable the js, its showing all tabs (sections) with the code inside. Is there a problem with showing code inside tabs?

    Hope I have described the problem correctly.

    Best regards and thumbs up to all your great work,
    Steve

    Reply
  187. Alex

    Hi Anja, Hats off for the tutorial!
    I am using the extra css code for the 1st tab content to be by default open. My problem is that i cannot make the 1st button to show as “active” by default. Is there something i have to change on the js code?

    Thanks in advance
    Alex

    Reply
    • Ania Romańska

      Make sure your active Blurb Module has second CSS class of active-tab added (it will need both: tab-title active tab).

      Reply
      • Alex

        Thank you Ania for the quick feedback. I forgot to add a “-” between “active-tab”. Everything works fine. 🙂

  188. Shannon

    You’re awesome! I hope that more people tip!

    I am trying Edit 1 above and I am sorry to bother you but I am missing something.

    When setting one tab as active when the page opens, the blurb is active but the text below isn’t showing up. Any suggestions?

    Thank you for your time.

    Reply
    • Ania Romańska

      Thank you Shannon,
      To make this section visible you should add another class to it, eg. tab-open (so it will have both: tab-content tab-open, without the comma – just the space between the two) and also this bit of CSS:

      .tab-open {
      	display:block;
      }

      https://imgur.com/a/x3foc4x
      Hope this helps.

      Reply
  189. Lee

    One other thing, there seems to be a conflict on your page / website when viewed in Safari, your Girly theme block to the left is invisible, also the GDPR tick box on the signup form doesnt work. I used Chrome to signup and all is fine there, just seems to be an issue with Safari (latest version here).

    Reply
  190. Lee

    HI Ania, Great tutorial, thank you. do you have the js code to toggle the tabs shut on click also please as I think that would be really useful. Thanks in advance Lee

    Reply
  191. Chris

    This is exactly what I needed. Thank you so much. Just one question, if I wanted the 4th tab/blurb to link to a new page rather than content likes tabs 1 – 3. How could I do that?

    Thanks in advance.

    Chris

    Reply
  192. Maknoo

    Hello,Ania so far your article is very help full,

    I have a question, like how can we center align blurb module ,divider for mobile devices only,
    Thanks

    Reply
  193. Mark

    Hey I would like to know how to add more than 4 blurb sections? I tried this and added tab4,5,6… but it does not seem to be working.

    Reply
    • Ania Romańska

      Hi, it should be a matter of adding more blurbs, more sections with corresponding IDs and editing the percentage width of blurbs in CSS.

      Reply
  194. Mark

    Ah yes, I missed that line – all working now. Fantastic!

    Is there a list on your site of other Divi Tutorials / Customisations you have developed?

    Reply
  195. Mark

    Great Tutorial – really is.

    Website in development – question for you:

    Have used the customisation and all works fine but when clicking a blurb/tab module – the content floats upwards above I-level of the browser.

    Have I missed something?

    Reply
    • Ania Romańska

      Hi Mark, yes, you actually did miss one little thing 😉
      At the end of that Scroll-To customization description I mentioned that if you are using a fixed navigation you’d need to edit one line of code (and replace 80 with your navigation height).

      Reply
      • Mark

        Thanks Ania, that makes sense . Appreciate the reply.

        I am struggling to find where that line of code lives. Could you point it out for me?

        I’m sure it’s straightforward but your knowledge would be very much appreciated.

        Thanks again.

      • Ania Romańska

        Please look at the code at the end of my blog post. (screenshot)

  196. Paul Dymel

    czesc ania, thank you for this tutorial, very neat and easy to customize. pozdrowienia from canada.

    Reply
  197. David

    Thank you! A great design. I have a hard need you help! Just point your mouse at the tab to display the content, ie without clicking?
    Thank you good wishes!

    Reply
  198. alpine

    Hi Ania,

    Excellent tutorial. I am attempting to implement your tab solution, but am running into a problem with short codes from the library remaining hidden in the final result. The tabs that have content, but no short codes are working perfectly. Any idea how to fix?

    Many thanks,

    Matt

    Reply
    • Maya

      Hi, I’m having the same problem. Any luck?

      Reply
  199. Elvis

    Hi Ania,

    Thanks for that great tutorial.

    I will use it soon for a specific project.

    Actually i need to customize it a little bit and i hope you can help (finger crossed 🙂 ).

    I need to get the 4 blurbs aligned vertically (on the left) and the content on the right.

    How can i do that ?

    Many thanks for your help

    Elvis.

    Reply
    • Ania Romańska

      Hi Elvis,

      You could try to use Specialty Section, place all the blurbs inside the sidebar and use rows instead of sections for the tabs content. You’d need to edit the CSS (the .blurb-tabs wouldn’t need flexbox anymore). I have this layout and a tutorial on my to-do list, but I’m afraid no date has been set on this yet.
      Hope this helps.

      Reply
  200. Bastien

    Hi Ania,

    First, thanks for the great tuto !
    Is it possible, instead of blurbs, to have a button open the tabs ? It would be easier to style it for me.

    I tried to do it, but obviously I miss a step : http://agricampus.madamepoppins.fr/test-tabs/

    Any help would be gladly appreciated !

    Reply
    • Ania Romańska

      Hi Bastien,

      Your JS code should be a bit different, as there is no need to search for the link url inside the module, as button module already is a link. I think you would just need to remove the .find(“a”) parts from the code.

      Reply
      • Bastien

        Hi,
        Thanks so much, it works perfectly.
        I was looking for a tutorial like this for a long time, thanks again !
        Bastien

  201. Ankit

    Hi Ania,

    Thank you for this wonderful tutorial. This is exactly what I was looking for. But, I am facing a small issue. I am using divi video sliders in the content for the blurbs. The tab which is active by default loads fine with thumbnails at the bottom. But remaining two tab does not load the thumbnail. Could you please guide me on how to get this to work.

    Ankit

    Reply
    • Ania Romańska

      Hi Ankit,

      Sorry, I wouldn’t know how to get it fixed.

      Reply
  202. Benedict

    Great tutorial, Any way to remove the flip animation when a blurb is opened?

    Reply
    • Ania Romańska

      Sure, it is inside the Blurb module settings (default Divi animations).

      Reply
  203. Tracy

    Hi Ania, great tutorial, thanks so much for posting! Are you able to assist me if I need to add an extra tab in? What CSS I require?

    Thanks so much!

    Tracy

    Reply
    • Ania Romańska

      Hi Tracy,

      You would just need to change the width of tab-title blurbs in CSS, like this:

      #blurb-tabs .tab-title {
      width:20%;
      }

      Reply
  204. Graham

    Thanks for a great tutorial Ania. Not sure why but the first two blurb header boxes are slightly narrower than the last two. Any ideas what I can do to fix this?

    Reply
    • Graham

      In Visual Builder the boxes are the same size, but as soon as I exit the Visual Builder the first two are a different size.

      Reply
      • anita

        Did you ever find a solution for this? I have the same problem.

      • Ania Romańska

        It is possible you have an empty space character inside the Blurb description, check the Blurb setting via the standard builder.

  205. Elke

    Thank you so much, dear Ania ! Great !

    Reply
  206. Jeffry Campanero

    Hi there,

    Thank you for this, it works great. Is it posible to have the entire blurb be a link rather than just the blurb title?

    Reply
  207. Quim

    Hey Ania,

    I’m using this on a website and it really looks great. But I’d like to know if there is a way to make a tab open when using the header menu of the website.

    Reply
  208. Luiza

    That’s really great tutorial!
    Thank you so much!

    I was wondering how can I add more columns to my CSS since I need 8 columns not four.

    Thank you again!

    Reply
    • Ania Romańska

      You would just need to change the width of tab-title blurbs in CSS, like this:

      #blurb-tabs .tab-title {
      width:12,5%;
      }

      Reply
  209. Jurrie

    Dear Ania,

    This is working great, I’ve used it on several websites. On this page https://melitakes.gr/βίντεο/ four videos are shown when a blurb is clicked. Is there a way to pause a playing video when it is hidden and another video is selected? I’ve searched the web thoroughly, but did not find a working solution.

    All the best from Greece!

    Reply
    • Ania Romańska

      I can see you’ve managed to get it working. Well done.

      Reply
  210. Marek

    Hi
    Is there a way to make the custom made icons go black after clicking the tab?
    I am not using the icons provided. And the custom ones are not changing the colors when the tab is clicked.
    Is it doable ???
    Thanks for the great tut.
    Marek

    Reply
    • Ania Romańska

      It’s not possible to change the image with CSS, you’d need to edit jQuery code.

      This thread should get you started.

      Reply
  211. dale

    Great tutorial Ania!!! One of the best end-to-end Divi learning guides I have followed – clean layout and well explained steps. Thx for sharing.

    Reply
  212. Francis

    Hello Ania,

    it´s look very fine but i still have a problem, I would like that the block linked with the blurb should appear without a click , just by moving the mouse over the blurb. I´ve added the js code, but it still doesnt work!
    I would enjoy if you could me a tipp!
    Thank´s
    Francis

    Reply
  213. Melle

    If I import the layout, where can I modify the CSS and Javascript?

    Reply
    • Ania Romańska

      The CSS and Javascript code are inside Code Modules.

      Reply
  214. Boya

    Ania,
    This tutorial is brilliant! Thank you very much. 🙂
    One of my clients wants exactly this structure, but with 6 blurb modules (I use images instead of icons), 4 out of 6 external links, it would open on a new tab.
    But when I insert the jQuery code, these four links do not work at all.
    The other 2 are perfectly displayed below.

    Can you help me, what should I change in jQuery code or elsewhere so that all 6 blurbs work perfectly?

    Thanks in advance!
    Boya

    Reply
    • Ania Romańska

      You would just need to change the width of tab-title blurbs in CSS, like this:
      #blurb-tabs .tab-title {
      width:16,66%;
      }

      Reply
  215. Amit

    The download link is not working right.

    Reply
    • Ania Romańska

      Please try again, it should work fine now.

      Reply
  216. Stephanie

    Hi, and thanks! What a great tutorial, love your work! I have one little thing. I would like to show tab2 or tab3 as a sublink in the topmenu. I have tried with #tab2 #tab3 etc., but the link will just go to the page with my #tab1 as default opened. I would like it to open with #tab2 or #tab3 through the links. Is there a (simple) way to change this?

    Reply
    • Ania Romańska

      Yes, it is possible, but a bit more complex – this informations should get you started.

      Reply
  217. Beverly

    Nevermind, I had to change the cache settings through the hosting and then I did a hard refresh and it worked.

    Reply
  218. Ryan

    Hi Ania,

    Awesome tutorial!

    I was wondering if their is a way that I can keep all 4 tabs side by side even in mobile?

    Any advice would be great, thank you.

    Reply
    • Ania Romańska

      Sure,
      Just remove the media queries from the CSS (after the /* Tab Titles Mobile Styles */ comment).

      Reply
  219. Sash

    I use your tab tutorial for our member dashboard, veriy nice, Thank you.

    One little problem… the last menu item is the logout button, how i can make clickable without loos the design and conflict with the script?

    Thanks you for a short response.

    Sash

    Reply
    • Ania Romańska

      Hi Sash,

      Sorry for the late reply, I would use different class for the script, leave the tab-title just for CSS and use two classes for each blurb that whould open a section like tab-title tab-open and just edited JS code and change tab-title class to tab-open. Hopefully that makes sense 😉

      Reply
  220. Francis

    Hi Ania,
    phantastic,. I use it for a client site. Looking fine within divi Builder. Doesn´t work fine when i exit the VB.
    Anyway a great tutorial

    Reply
  221. Philipp

    Hi Ania,
    that’s a great tutorial and module. I love it! But I do have problems to add another module to that page I generated with this module within the console. How can I do that?
    Thank you very much!

    Reply
    • Ania Romańska

      Hi Philipp,
      Sorry, I’m not sure what exactly seems to be a problem. Could you rephrase your question?

      Reply
  222. heritier

    This is a great tuto and i like it.

    My little question is how can i add a button that on click it’ll open the section I want?

    Thanks

    Reply
    • Ania Romańska

      Yes, it would be possible with some custom JS, but I’m afraid I don’t have a detailed solution for you.

      Reply
  223. Alfred

    Thank you so much for a great tutorial and a great design idea.

    Reply
  224. Connie

    Thank you, this is something I always wanted to realisze…

    Reply
  225. Jemma

    Hi Ania

    As you mentioned, I’ve cleared the steps and then I paste the .json file that I download as your tutorial. But still can’t see the contents when I click the tabs. Do you think did I put the js in the wrong place?

    Reply
    • Jemma

      Don’t worry about this comment Ania. I figured out what was the problem and how to solve it. Thanks!

      Reply
  226. Jemma

    Thanks for your posting.
    I am editing my page by following your tutorial. However, when I click the tab, the contents don’t show up. 404 error has been showing rather than linked id that I made as contents. do you have any idea to solve this problem? what should I do for make for working as normal? thanks!

    Reply
    • Ania Romańska

      Hi Jemma, if you’re having trouble re-creating all the steps, you can simply download the free layout and edit it.

      Reply
  227. Jessica

    Thank you thank you thank you!!!! Was exactly what I needed.

    Reply
  228. Jos

    Hey Ania,

    Great tutorial!
    I only have the question like jeff, how to add a active class to the active blurb, but not hard coded but on click.
    Is that possible?

    Keep up the nice work ;p

    Best regards Jos

    Reply
    • Ania Romańska

      Hi, I’m not sure what you mean – we are adding an active class on click. Jeff issue was to have one tab active on page load (and it is explained in the post how to do that).

      Reply
  229. Chris

    Hi Ania,

    Thank you so much for the video, it really helped me.

    Is there a way that I can put in a auto scroll when clicking on the tab. Because I added more tabs on my website so when you click on it on the mobile version you can’t see the content that pops up.

    Thank you for your help.

    Reply
    • Ania Romańska

      Hi Chris,
      I just edited this post with JS code, that will do that – when you click on the tab it’ll open a section and scroll to it.

      Reply
  230. Marcio

    Great tutorial!
    Im using images instead of icons, is it possible to change the image of the active blurb? instead of just changing the background?

    Reply
    • Ania Romańska

      Yes, it’s possible, but would require some custom js code. In order to replace your image with another one you’d need to replace its src attribute. Here is an idea to get you started:
      $("#myImage").attr("src", "path/to/newImage.jpg");

      Reply
  231. David Christopher

    Hi Ania,

    I have made all the changes and it looks great.

    One issue I am having though is the background colour height of the selected tab as the amount of text contained in each tab varies. Also different screen resolutions alters the height of the text.

    I have added CSS for mobile, tablet and the dreaded iPad Pro and I am manipulating the height by finding a default and adding extra padding in the Divi spacing. But this is messy and not very consistent.

    Do you have any advice how I could make the background .tab-content colour responsive to devices and resolutions?

    Reply
    • Ania Romańska

      I think the easiest way would be to set the min-height value for each blurb and add it to the css (depending on how tall is the tallest element) and you can set different number for different screen sizes with media queries.

      Reply
  232. Aimee Jones

    Hi Ania,
    Thanks for the great tutorial!

    Is it possible to create anchor links to the blurb/sections? If so, I would love to know how to go about it.
    I’m not so well versed in css and jquery so not sure where to start!

    Thanks,
    Aimee

    Reply
    • Ania Romańska

      Hi Aimee,

      Sorry for the late reply… If you’d like to link to the title tabs from different part of the page you can do so, by using this section ID, so your URL (eg. inside the button settings) would look like this #blurb-tabs

      Reply
      • Jonas

        Hi Ania,

        I was wondering the same thing as Aimee and read your reply but couldn’t get it to work.

        I have a text module in one section that contains a link to another section, but when I click the link the page scrolls up a bit but nothing else happens.

        Thank you for this guide btw!

  233. Michael

    Hi I love this and I am tweaking bits to suit my design. (I just imported the Json file as I am a divi beginner) and I wondered how to adjust the mouse over settings on the blurb tab menu?
    Is it possible to have the box close if you click on the tab again?
    Thanks and love your work

    Reply
    • Ania Romańska

      Hi Michael,
      Sorry for the late reply… Yes, closing tabs on click is possible however it would require some custom JS coding. And if you want to change the appearance of Blurb on mouse over – you should edit the part of CSS below the /* Hover Styles for Blurb Tabs – Titles */ comment. Hope this helps and thank you for your kind words 🙂

      Reply
  234. David

    Fantastic tutorial Ania.
    I learnt so much.
    Thank you!

    One quick question – how would you go about showing the details of the first tab as default when first coming to the page?

    Reply
    • Ania Romańska

      Hi David,
      It is explained at the bottom of the post.

      Reply
      • David

        Thanks Ania – i missed that 😉

  235. Emmanuel

    Hi Ania,
    Great tutorial !
    Just one question : on mobile, after clicking, the text module opens at the bottom of the 4 blurbs and so you can’t see that something is opening.
    Would it be possible to open the texte module just before the blurb which is clicked or have an automatic scroll to the text module ?
    I don’t know if I am clear enough ?
    Tks for your help.
    You can see it here https://www.teteenlair-parachutisme.com/

    Reply
    • Ania Romańska

      I edited my post and added a JS, so the tabs would open and scroll to choosen section on click.

      Reply
      • Manu

        Magic Ania !
        Great edit !

    • Ania Romańska

      Hi Theresa,

      I just updated the post with instructions on how to make one of the tabs open by default. Hope this helps.

      Reply
  236. Sagar

    Thanks for this effort. 🙂

    Reply
  237. Bobby C.

    You certainly have a new follower. I love your style and detailed explanation s. Please keep up the great work. I will surely keep you in mind when I get in a jam with a project. Having a good place to sub out work is always nice.

    Reply
  238. Nick

    Truly well done..been a Divi designer for many years, this has to be one of the most useful, eloquently communicated tutorials I have come across.

    Reply
    • Ania Romańska

      Thank you for your kind words, it’s very encouraging 🙂

      Reply
  239. Tammy

    Thanks Ana,

    This is great! I look forward to using it.

    Reply
  240. Steven

    Thank you very much, Ania! Exactly what I was looking for, so I will be using this for a project next week!

    Reply
  241. Ania Romańska

    Thank you all guys, I’m really happy that you like it 🙂 <3

    Reply
  242. Shawn

    Absolutely a clean, yet advanced piece of work!! Most excellent and you gave me one of the greatest Christmas presents ever, as I was wanting something somewhat similar, yet this FAR surpasses what I had in mind. Thank you for sharing this wonderful gift, the fruits of your labor, and your talents :o)

    Reply
  243. Josh

    Mentioned this in our group but wanted to comment here and say thanks again for this awesome tutorial! Couldn’t have come at a more perfect time and is such a great solution opposed to trying to customize the tab module. I’ll be using this on many sites upcoming and will be referring back to your tutorials regularly!

    Reply
  244. Olga

    Thanks, Ania for the tutorial, this is so useful. Love your accent btw : )

    Reply
  245. Frederic

    Beautiful design and amazing used of DIVI with Blurb. Very creative too! Thank you very much for sharing…

    Reply
  246. Maciej

    Great tutorial Ania! Thank you 🙂

    Reply
  247. Stefan

    Great post!

    This turns out to be one of the best resources for more advanced divi tutorials 🙂 thank you very much!

    One question: How would I have one of the tabs shown/enabled per default when the side loads?

    Reply
    • Ania Romańska

      Hi Stefan,

      You would need to add another class to this section, eg. tab-open (so it will have both: tab-content tab-open)
      And then in CSS right after this:

      .tab-content {
      display:none;
      }

      you should add:

      .tab-open {
      display:block;
      }

      And it should work.

      Reply
      • Jeff

        I’ve added this and it works great, is there any way to make the blurb it’s connected with display in the active color?

      • Ania Romańska

        Sorry Jeff, I’m not sure what do you mean exactly. Could you rephrase your question, or show an example of what are you trying to change?

      • Jeff

        So when the content is set to display by default as per your css suggestion, to also have the blurb it’s associated with display in the light grey color as if it’s been clicked on and active.

        https://imgur.com/5UBaCrn

      • Ania Romańska

        Yes, you’re right, I see what you mean. There needs to be second class active-tab added to the Blurb Module (it needs to have both: tab-title active tab).

      • Jeff

        That’s crazy, I had added that but it wouldn’t show. I guess I didn’t clear the cache when I had added it before.

        Thank you for this and your time!

  248. Eitel Bock

    This is indeed a great layout and accompanying tutorial. Thank you very much Ania.

    Reply
  249. Bernhard

    That’s really great ?Thanks for sharing ?
    How will it look like on devices where JS is disabled?

    Reply
    • Ania Romańska

      You would need to edit it a little to work with javascript disabled (remove the display:none; from the sections from CSS and hide them with JS instead, so all of the sections would be visible when javascript is disabled).

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Enjoing our content?

You might find this interesting…

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen

Would you like to...

Consult Ania and fellow students?

Join the conversation inside our private FB group.

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Ask Ania?

Submit a question for the next live Q&A session.

Consult fellow students?

Join the conversation inside our private FB group.