Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Woocommerce – Hide tab and content when content is empty

Here is the structure of the tabs. Without being able to edit the HTML, is it possible to hide the tab and contents when the content is empty? I have provided minimal jQuery below, but I’m unable to bend it to my will and confused. I appreciate any assistance.

<div class="et_pb_module et_pb_tabs et_pb_tabs_0_tb_body et_slide_transition_to_1 et_slide_transition_to_2 et_slide_transition_to_3 et_slide_transition_to_5 et_slide_transition_to_0">
  <ul class="et_pb_tabs_controls clearfix">
    <li class="et_pb_tab_0_tb_body et_pb_tab_active" style="height: 50.5938px;"><a href="#">Description</a></li>
    <li class="et_pb_tab_1_tb_body" style="height: 50.5938px;"><a href="#">Specifications</a></li>
    <li class="et_pb_tab_2_tb_body" style="height: 50.5938px;"><a href="#">Videos</a></li>
    <li class="et_pb_tab_3_tb_body" style="height: 50.5938px;"><a href="#">Downloads</a></li>
    <li class="et_pb_tab_4_tb_body" style="height: 50.5938px;"><a href="#">What's Included</a></li>
    <li class="et_pb_tab_5_tb_body" style="height: 50.5938px;"><a href="#">Compare Similar</a></li>
  </ul>
  <div class="et_pb_all_tabs">
    <div class="et_pb_tab et_pb_tab_0_tb_body clearfix et_pb_active_content et-pb-active-slide" style="z-index: 1; display: block; opacity: 1;">Tab 1 Product Description </div>
    <div class="et_pb_tab et_pb_tab_1_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 2 content </div>
    <div class="et_pb_tab et_pb_tab_2_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 3 content </div>
    <div class="et_pb_tab et_pb_tab_3_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 4 content </div>
    <div class="et_pb_tab et_pb_tab_4_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 5 content </div>
    <div class="et_pb_tab et_pb_tab_5_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 6 content </div>
  </div>
</div>

<script>
$(document).ready(function() {
$(".et_pb_tabs_controls").each(function() {
var $tabclass = $(this).addClass('et_pb_tab');
var $txt = $(this).text();
if ($txt == "") {                               
$('a[data-target=#'+$tabclass+']').closest('div').hide();
}
});
});
</script>
Tags:

2

Answers


  1. 0

    You mean hide the link AND div if the link is empty?

    If we just hide the link, then we cannot navigate to the div anyway.

    In any case here is the code you need to do either or both

    $(function() {
  $(".et_pb_tabs_controls li").each(function() {
    $(this).addClass('et_pb_tab');
    var txt = $(this).text().trim();
    if (txt === "") {
      const tabClass = Array.from(this.classList)
        .filter(cls => cls.startsWith('et_pb_tab_'))[0];
        console.log(tabClass)
      $(this).hide()  
      $(`.${tabClass}`).hide();
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="et_pb_module et_pb_tabs et_pb_tabs_0_tb_body et_slide_transition_to_1 et_slide_transition_to_2 et_slide_transition_to_3 et_slide_transition_to_5 et_slide_transition_to_0">
  <ul class="et_pb_tabs_controls clearfix">
    <li class="et_pb_tab_0_tb_body et_pb_tab_active" style="height: 50.5938px;"><a href="#">Description</a></li>
    <li class="et_pb_tab_1_tb_body" style="height: 50.5938px;"><a href="#">Specifications</a></li>
    <li class="et_pb_tab_2_tb_body" style="height: 50.5938px;"><a href="#">Videos</a></li>
    <li class="et_pb_tab_3_tb_body" style="height: 50.5938px;"><a href="#"></a></li>
    <li class="et_pb_tab_4_tb_body" style="height: 50.5938px;"><a href="#">What's Included</a></li>
    <li class="et_pb_tab_5_tb_body" style="height: 50.5938px;"><a href="#">Compare Similar</a></li>
  </ul>
  <div class="et_pb_all_tabs">
    <div class="et_pb_tab et_pb_tab_0_tb_body clearfix et_pb_active_content et-pb-active-slide" style="z-index: 1; display: block; opacity: 1;">Tab 1 Product Description </div>
    <div class="et_pb_tab et_pb_tab_1_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 2 Specifications</div>
    <div class="et_pb_tab et_pb_tab_2_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;">Tab 3 Videos</div>
    <div class="et_pb_tab et_pb_tab_3_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Downloads</div>
    <div class="et_pb_tab et_pb_tab_4_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;">What's Included</div>
    <div class="et_pb_tab et_pb_tab_5_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Compare Similar </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Not easy to understand what content you want to check and hide.
    Your a tag doesn’t have the data property.

    If you want to check the content of the li you need to iterate over it and not over ul

    $(".et_pb_tabs_controls li").each...

    You could use a data-target on the li to identify the class of the div you want to hide.

    So, just check the content of the element, get the element mentioned in data-target and hide them as you did.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search