Creating Tabs using Ajax with WordPress, Woocommerce and Divi
I have a website I am working on using Divi and Woocommerce. Since Divi and Woocommerce Categories don't get along, I found a tutorial to build out tabs for categories. This is what it looks like:
When you select the product, the content directly under changes, and the the products below that change to match the tab you clicked on.
What I want to do is change the content area's to ajax loading when a different product is clicked. Currently, I am using the Divi Theme Builder to do this with Custom CSS and JavaScript.
Here is my code:
<script>
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();
});
});
});
</script>/* Product Headers */
/* Divi Lover Blog Categories Headers Custom CSS */
.dl-blurbs-row .et_pb_column {
display:flex;
align-items:center;
justify-content:space-between;
}
.dl-blurbs-row .et_pb_blurb {
flex-basis:20%; /* Change this value if you'd like to have different number of items in a row */
}
/* Decrease the Blurb image bottom margin */
.dl-blurbs-row .et_pb_blurb .et_pb_main_blurb_image {
margin-bottom:15px;
}
/* Add hover effect to Blurbs */
.dl-blurbs-row .et_pb_blurb .et_pb_main_blurb_image img {
transition:all .3s ease-in-out;
}
.dl-blurbs-row .et_pb_blurb .et_pb_main_blurb_image:hover img {
transform:scale(1.1);
}
@media (max-width:800px) {
/* Hide the Blurb title on mobile
.dl-blurbs-row .et_pb_blurb .et_pb_module_header {
display:none;
}*/
/* Change Blurb apperance on mobile */
.dl-blurbs-row .et_pb_blurb.et_pb_module {
padding:15px 0 0!important;
margin-bottom:0!important;
margin-top: 0!important;
border-radius: 0!important;
}
}<div class="et_pb_section et_pb_section_1_tb_body et_pb_with_background et_section_regular">
<div class="et_pb_row et_pb_row_1_tb_body dl-blurbs-row">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_1_tb_body et_pb_css_mix_blend_mode_passthrough et-last-child">
<div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_0_tb_body et_pb_text_align_center et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style="">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/3-thin-series/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2020/01/883-Nubio.png" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/883-Nubio.png 1200w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/883-Nubio-980x980.png 980w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/883-Nubio-480x480.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1200px, 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div>
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/3-thin-series/">3" Thin Line Series</a></h4>
</div>
</div>
<!-- .et_pb_blurb_content -->
</div>
<!-- .et_pb_blurb -->
<div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_1_tb_body et_pb_text_align_center et_pb_blurb_position_top et_pb_bg_layout_dark">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-series/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-cortina_l.jpg" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-cortina_l.jpg 240w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-cortina_l-100x100.jpg 100w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-cortina_l-150x150.jpg 150w" sizes="(max-width: 240px) 100vw, 240px" class="et-waypoint et_pb_animation_off et-animated"></span></a></div>
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-series/">4" Premier Series</a></h4>
</div>
</div>
<!-- .et_pb_blurb_content -->
</div>
<!-- .et_pb_blurb -->
<div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_2_tb_body et_pb_text_align_center et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style="">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-fire-rated/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Clarity.png" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Clarity.png 800w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Clarity-480x480.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div>
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-fire-rated/">4" Fire Rated</a></h4>
</div>
</div>
<!-- .et_pb_blurb_content -->
</div>
<!-- .et_pb_blurb -->
<div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_3_tb_body et_pb_text_align_center et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style="">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-x8-albend/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2019/08/4x8-Albend-Nubio.png" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2019/08/4x8-Albend-Nubio.png 800w, https://glassblockwarehouse.com/wp-content/uploads/2019/08/4x8-Albend-Nubio-480x480.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 800px, 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div>
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/4-x8-albend/">Albend</a></h4>
</div>
</div>
<!-- .et_pb_blurb_content -->
</div>
<!-- .et_pb_blurb -->
<div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_4_tb_body et_pb_text_align_center et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style="">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/8-double-end/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2020/01/8_Double-End-Nubio.jpg" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/8_Double-End-Nubio.jpg 1000w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/8_Double-End-Nubio-980x980.jpg 980w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/8_Double-End-Nubio-480x480.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1000px, 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div>
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/8-double-end/">8" Double End</a></h4>
</div>
</div>
<!-- .et_pb_blurb_content -->
</div>
<!-- .et_pb_blurb -->
<div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_5_tb_body et_pb_text_align_center et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style="">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/8-end/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2020/01/822-End-Block-Cortina.jpg" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/822-End-Block-Cortina.jpg 1000w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/822-End-Block-Cortina-980x980.jpg 980w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/822-End-Block-Cortina-480x480.jpg 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1000px, 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div>
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/8-end/">8" End</a></h4>
</div>
</div>
<!-- .et_pb_blurb_content -->
</div>
<!-- .et_pb_blurb -->
<div class="et_pb_with_border et_pb_module et_pb_blurb et_pb_blurb_6_tb_body et_pb_text_align_center et_pb_blurb_position_top et_pb_bg_layout_dark et_had_animation" style="">
<div class="et_pb_blurb_content">
<div class="et_pb_main_blurb_image"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/8-corner/"><span class="et_pb_image_wrap"><img src="https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Nubio-90-degree-Corner-glass-block-1.png" alt="" srcset="https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Nubio-90-degree-Corner-glass-block-1.png 1200w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Nubio-90-degree-Corner-glass-block-1-980x980.png 980w, https://glassblockwarehouse.com/wp-content/uploads/2020/01/884-Nubio-90-degree-Corner-glass-block-1-480x480.png 480w" sizes="(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1200px, 100vw" class="et-waypoint et_pb_animation_off et-animated"></span></a></div>
<div class="et_pb_blurb_container">
<h4 class="et_pb_module_header"><a href="https://glassblockwarehouse.com/product-category/us-imperial-line/8-corner/">8" Corners</a></h4>
</div>
</div>
<!-- .et_pb_blurb_content -->
</div>
<!-- .et_pb_blurb -->
</div>
<!-- .et_pb_column -->
</div>
<!-- .et_pb_row -->
</div>
<div class="et_pb_section et_pb_section_2_tb_body et_pb_with_background et_section_regular">
<div class="et_pb_row et_pb_row_2_tb_body">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_2_tb_body et_pb_css_mix_blend_mode_passthrough et-last-child">
<div class="et_pb_module et_pb_text et_pb_text_1_tb_body et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner">
<h1>4″ Premier Series</h1>
<div class="wpb_column vc_column_container vc_col-sm-6">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper"><strong>Fully versatile</strong> glass blocks designed for vertical structures in a<strong> wide variety of formats and thicknesses</strong>, to increase maximum <strong>flexibility</strong> with wall compositions.<br> Realize vertical
structures that are lighter, thinner, more structurally stable, and solid. Create angles, curves, or finished jambs and/ or heads.</div>
</div>
</div>
</div>
</div>
<div class="wpb_column vc_column_container vc_col-sm-6">
<div class="vc_column-inner ">
<div class="wpb_wrapper"></div>
</div>
</div>
<div class="wpb_column vc_column_container vc_col-sm-6">
<div class="vc_column-inner vc_custom_1517167391313">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p> </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .et_pb_text -->
</div>
<!-- .et_pb_column -->
</div>
<!-- .et_pb_row -->
</div>What I want to do is have the customer click on the tab (for example 3" Thin Line Series) and the description and products will match the clicked on tab without refreshing the whole page.
The URL is https://glassblockwarehouse.com/product-category/us-imperial-line/3-thin-series/
Solution
You should use an return false inside the click function otherwise it will try to behave like an link.
$(this).click(function() {
$(this).siblings().removeClass("active-tab");
$(this).addClass("active-tab");
$('.tab-content').hide();
$(section_id).show();
return false;
});
- How to dynamically print the raw value of the input with AutoNumeric js?
- How to secure my login page
- Why clicking on submit button is nothing happens in JSP?
- Uploading multiple file image and preview in jQuery before upload
- Jquery Ajax Problem
- How to get the grid coordinates of an element using JavaScript?
- Bootstrap popper.js Failed to find a valid digest in the 'integrity' attribute for resource
- How to add simple jquery loader/spinner using ajax?
- How to change placeholder in select2?
- Attaching to click event (with jQuery) on submit button kills submission function
- Change values of input dynamically added on change select option
- slideDown jumps abruptly at the end
- jQuery Ajax Function
- How to use a variable in html code using backtick in JavaScript?
- ASP.NET MVC and AJAX
- Get the highlighted/selected text in CKEDITOR 5
- Select2 dropdown on search checking any character occurance, need to change to only check by first character
- AngularJs - ng-model in a SELECT
- Select2 search options
- how to force the ag-grid to scroll to the selected/highlighted row position
- using json objects in URLSearchParams
- How to disable all div content
- select input value with jquery
- Is there any specific reason behind using $ with variable in jQuery
- jquery and ajax request
- asp.net ajax jquery
- How to use jQuery Select2 with AngularJS
- Adding data attribute to DOM
- Jquery Ui Datepicker month/year dropdown is not working in popup in latest firefox
- React.js: Separate React.js code from HTML