Jquery tab onload hide

Question

I have three tabs in jquery to show and hide. The scenario is that when the page is loaded, all the three tabs are showing at the same time. But when I click on the second tab, the other two tabs gets hided exactly the same way I want. I want when the page is loaded, only first tab should be shown and other two tabs should not be shown. Please see the code for your reference:-

javascript code:-

<script src='assets/js/swipe.js'></script>

<script type="text/javascript">
    var elem = document.getElementById('mySwipe');
    window.mySwipe = Swipe(elem, {
       startSlide: 4,
       auto: 3000,
       continuous: true,
       disableScroll: true,
       stopPropagation: true,
       callback: function(index, element) {},
       transitionEnd: function(index, element) {}
    });

    var elem = document.getElementById('mySwipe1');
    window.mySwipe1 = Swipe(elem, {
      startSlide: 4,
       auto: 3000,
       continuous: true,
       disableScroll: true,
       stopPropagation: true,
       callback: function(index, element) {},
       transitionEnd: function(index, element) {}
    });

    var elem = document.getElementById('mySwipe2');
    window.mySwipe2 = Swipe(elem, {
      startSlide: 4,
       auto: 3000,
       continuous: true,
       disableScroll: true,
       stopPropagation: true,
       callback: function(index, element) {},
       transitionEnd: function(index, element) {}
        });

 <ul class="nav nav-tabs tabs">
            <li class="active"><a href="#services" data-toggle="tab">Interiors</a></li>
            <li><a href="#products" data-toggle="tab">Culture</a></li>
            <li><a href="#products1" data-toggle="tab">CSR</a></li>
</ul>

HTML for the tab.

<div class="tab-content">
            <div class="tab-pane active service-detail01" id="services">
                <div class="container-fluid margin-bottom-50 clearfix" style="padding-left: 0px">
               <div class="span4">
                    <!--<div class="service-img"><img src="assets/images/bs-pg/service-dummy-img.jpg" /></div>-->


                    <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
                        <div class='swipe-wrap'>
                            <div><b><img  src="assets/images/interiors/Career-Images.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/interiors/Monitoring_Live-Monitoring-Station-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/interiors/Monitoring_The-Active-Deterrence-Station-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/interiors/Monitoring_The-Command-and-Control-Center-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/interiors/Ther-Corporate-Office-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/interiors/The-Securens-Lobby-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img src="assets/images/interiors/The-Support-Department-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/interiors/Training-Room.jpg" alt="Securens" title="Securens"></b></div>
                        </div>
                    </div>

                    <div style='text-align:center;padding-top:20px;'>
                        <button onclick='mySwipe.prev()'>prev</button> 
                        <button onclick='mySwipe.next()'>next</button>
                    </div>

                </div>

                <div class="span4">
                    <h3 style="line-height:16px; height:50px;">Celebrations</h3>
                    <p>Securens celebrates festivals and other special occasions with Fun and Frolic.</p>

                </div>

                </div>
            </div>

            <div class="tab-pane active service-detail01" id="products">
                <div class="container-fluid margin-bottom-50 clearfix" style="padding-left: 0px">
               <div class="span4">

                    <div id='mySwipe1' style='max-width:500px;margin:0 auto' class='swipe'>
                        <div class='swipe-wrap'>
                            <div><b><img  src="assets/images/culture/Core-Group-Meeting-in-Progress.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/culture/HR-Meeting-in-Progress-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/culture/Team-Securens-Mixed-Team-1-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/culture/Team-Securens-Team-3-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/culture/The-Football-Cafe-as-Smart-Object-1.jpg" alt="Securens" title="Securens"></b></div>

                        </div>
                    </div>

                    <div style='text-align:center;padding-top:20px;'>
                        <button onclick='mySwipe1.prev()'>prev</button> 
                        <button onclick='mySwipe1.next()'>next</button>
                    </div>

                </div>

                <div class="span4">
                    <h3 style="line-height:16px; height:50px;">Culture</h3>

                    <p>We believe in thriving in a fun and producing atmosphere.</p>

                </div>

                </div>
            </div>


              <div class="tab-pane active service-detail01" id="products1">
                <div class="container-fluid margin-bottom-50 clearfix" style="padding-left: 0px">
               <div class="span4">
                    <!--<div class="service-img"><img src="assets/images/bs-pg/service-dummy-img.jpg" /></div>-->


                    <div id='mySwipe2' style='max-width:500px;margin:0 auto' class='swipe'>
                        <div class='swipe-wrap'>
                            <div><b><img  src="assets/images/CSR/Banglore.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/CSR/Chennai.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/CSR/Delhi.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/CSR/Delhi-2.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/CSR/Kolkatta.jpg" alt="Securens" title="Securens"></b></div>
                         <div><b><img  src="assets/images/CSR/Mumbai1.jpg" alt="Securens" title="Securens"></b></div>
                         <div><b><img  src="assets/images/CSR/Mumbai2.jpg" alt="Securens" title="Securens"></b></div>
                         <div><b><img  src="assets/images/CSR/Mumbai3.jpg" alt="Securens" title="Securens"></b></div>
                          <div><b><img  src="assets/images/CSR/Mumbai4.jpg" alt="Securens" title="Securens"></b></div>
                           <div><b><img  src="assets/images/CSR/Pune1.jpg" alt="Securens" title="Securens"></b></div>
                           <div><b><img  src="assets/images/CSR/Pune2.jpg" alt="Securens" title="Securens"></b></div>
                        </div>
                    </div>

                    <div style='text-align:center;padding-top:20px;'>
                        <button onclick='mySwipe2.prev()'>prev</button> 
                        <button onclick='mySwipe2.next()'>next</button>
                    </div>

                </div>

                <div class="span4">
                     <!--<div class="service-img"><img src="assets/images/bs-pg/service-dummy-img.jpg" /></div>-->
                    <h3 style="line-height:16px; height:50px;">CSR</h3>

                    <p>Our teams are about enthusiastic about Social Responsibility Initiatives.</p>

                </div>

                </div>
            </div>

Answer 1

What about simply adding some

style="display: none;"

to the second and third tab?

And on swipe remove that style.

Or put a "hidden" class to the tabs with the wanted style and toggle this class on swipe.

EDIT:

May not be the best solution, but works for the first...

 <ul class="nav nav-tabs tabs">
      <li class="active"><a href="#services" data-toggle="tab" onclick="jQuery('.tab-pane').hide(); jQuery('#services').show();">Interiors</a></li>
      <li><a href="#products" data-toggle="tab" onclick="jQuery('.tab-pane').hide(); jQuery('#products').show();">Culture</a></li>
      <li><a href="#products1" data-toggle="tab" onclick="jQuery('.tab-pane').hide(); jQuery('#products1').show();">CSR</a></li>
 </ul>

Answer 2

You can use jQuery hide and show events directly on document ready event

$(document).ready(function(){
    $(".tab-pane").hide();
    $("#services).show();
});

Also bind onclick Events on each list item to show the corresponding tab as:

function showTab(tabName){
  $(".tab-pane").hide();
  $("#"+tabName).show();
}

Or bind it directly in document event for on-click event on each list -item

$(document).ready(function(){
    $(".tab-pane").hide();
    $("#services").show();

    $("#first_li").click(function(){
          showTab('services');
    });
    $("#second_li").click(function(){
          showTab('products');
    });
    $("#third_li").click(function(){
          showTab('products1');
    });
});

And name the list items as :

<ul class="nav nav-tabs tabs">
    <li class="active" id="first_li"><a href="#services" data-toggle="tab">Interiors</a></li>
    <li id="second_li"><a href="#products" data-toggle="tab">Culture</a></li>
    <li id="third_li"><a href="#products1" data-toggle="tab">CSR</a></li>
</ul>