Question

I have tabs on my website, but sometimes the tab doesn’t contain any info like this:

        <div class="idTabs">
                    <div class="tabIt">
                        <a class="selected" href="#productDetails" name="Tab1">Description</a>
                    </div>
                    <div class="tabIt">
                        <a href="#specs" name="Tab2" class="">Specifications</a>
                    </div>
        </div>


  <div class="productInformation">

        <div class="information">

            <div id="productDetails" style="display: block; ">
                   <div class="productInfo">
                   </div>
            </div>
            <div id="specs" style="display: none; ">

            </div>
        </div>

   </div>

How can I make it shouldn’t display the tabs if it doesn’t contain any information?
Thanks

Answer 1

You’ll probably need RegEx for that. Something like this:

<script type="text/javascript">
    regex = /(\w)/;

    // div to check to be empty
    div = document.getElementsByClassName('productInfo')[0];

    if(regex.test(div.innerHTML) === false){
        document.getElementById('productDetails').style.display = 'none';
        document.getElementsByClassName('tabIt')[0].style.display = 'none';
    }
</script>

Same with jQuery:

<script type="text/javascript">
    regex = /(\w)/;

    div = $('div#productDetails div.productInfo').text();

    if(regex.test(div) === false){
        $('#productDetails').hide();
        $('.tabIt').first().hide();
    }
</script>

It will also hide the DIV if it contains only whitespaces.