I've searched this page for an answer but I didn't find one.

I have following bootstrap-tabs:

```
<div class="dt-container">
    <ul id="description-tabs" class="nav nav-tabs tabs-responsive" role="tablist">
       <li class="active">
           <a id="tab-description" href="#tab1" role="tab" data-toggle="tab">Description</a>
       </li>
       <li>
           <a id="tab-technicaldata" href="#tab2" role="tab" data-toggle="tab">Details</a>
       </li>
    </ul>

    <div class="panel-container">
       <div id="tab1">Lorem ipsum</div>
       <div id="tab2"></div>
    </div>
</div>

```

How do i hide the the *tab2* which contains no content at all. 

I tried it with this script. It actually was hiding the tab with no content but I was not able to click on any of the tabs:

```
<script>
    $(function() {
        var $tabs = $( "#dt-container" );
        $tabs.tabs();
        var offst = 0;
        $('#dt-container > div > div').each(function(index, elem) {
            if ($(elem).html().trim() === '') {
                $tabs.tabs( "remove" , index - offst);
                offst++;
            }
        });
    });
</script>

```