CODEWITHSUNDEEP
jquerytabsaccordionelementor
Cristihan González
Cristihan González

Reputation: 5

Hide tab on accordion when content is empty

I have this accordion in elementor that populates info from Woocommerce products:

<div class="elementor-accordion" role="tablist">
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Directions</a></h5>
    <div>Mix the recommended amount of creme developer with your favorite hair coloring products.</div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Ingredients</a></h5>
    <div>Aqua, Hydrogen Peroxide, Cetyl Alcohol, Cetearyl Alcohol, Ceteareth-20, Diethylenetriamine Pentamethylene Phosphonic Acid, Paraffinum Liquidum, Phosphoric Acid.</div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Product Claims</a></h5>
    <div></div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Safety Information</a></h5>
    <div></div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Legal Disclaimer</a></h5>
    <div></div>
  </div>
</div>

I'd like to hide the tabs when their content is empty. Wrote this snippet but it is not working:

<script>
var $span = $(".elementor-accordion-item > div:empty");
$span.parent('div').hide();
$span.parent('div').prev('h5').hide();
</script>

Any help, please?

Upvotes: 0

Views: 1531

Answers (1)

Zam Abdul Vahid
Zam Abdul Vahid

Reputation: 2721

Just a little tweak to your code.

$(document).ready(function(){
  var $emptyDivs = $(".elementor-accordion-item > div:empty");
  $emptyDivs.each(function(){
    $(this).parent('div.elementor-accordion-item').hide();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="elementor-accordion" role="tablist">
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Directions</a></h5>
    <div>Mix the recommended amount of creme developer with your favorite hair coloring products.</div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Ingredients</a></h5>
    <div>Aqua, Hydrogen Peroxide, Cetyl Alcohol, Cetearyl Alcohol, Ceteareth-20, Diethylenetriamine Pentamethylene Phosphonic Acid, Paraffinum Liquidum, Phosphoric Acid.</div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Product Claims</a></h5>
    <div></div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Safety Information</a></h5>
    <div></div>
  </div>
  <div class="elementor-accordion-item">
    <h5><a class="elementor-accordion-title" href="">Legal Disclaimer</a></h5>
    <div></div>
  </div>
</div>

Upvotes: 1

Related Questions