CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
sam orten
sam orten

Reputation: 206

How we default open a tab using jquery?

In this code I want open one tab by default. Now when I click on any tab like Customer Centric Approach related data will open But I want at least one tab is open by default So, How can I do This ?

jQuery(function() {
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').slideUp();
    jQuery('.targetDiv').hide();
    jQuery('#div' + $(this).attr('target')).slideToggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs nav-stacked">
  <li><a class="showSingle" target="1">Customer Centric Approach</a></li>
  <li><a class="showSingle" target="2">Process Oriented Approach</a></li>
</ul>
<div id="div1" class="targetDiv">
  <div class="col-md-8">
    <p>Hello</p>
  </div>
  <div class="col-md-4" style="margin-top: 25px;">
    <img src="images/why/customer.jpg" alt "" />
  </div>
</div>
<div id="div2" class="targetDiv">
  <div class="col-md-8">
    <p>WORLD</p>
  </div>
  <div class="col-md-4" style="margin-top: 25px;">
    <img src="images/why/process.png" alt "" />
  </div>
</div>

Upvotes: 1

Views: 84

Answers (1)

mplungjan
mplungjan

Reputation: 177691

Like this

jQuery(function() {
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').slideUp();
    jQuery('.targetDiv').hide();
    jQuery('#div' + $(this).attr('target')).slideToggle();
  }).eq(0).click(); // click the first (or one passed in HASH if needed)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs nav-stacked">
  <li><a class="showSingle" target="1">Customer Centric Approach</a></li>
  <li><a class="showSingle" target="2">Process Oriented Approach</a></li>
</ul>
<div id="div1" class="targetDiv">
  <div class="col-md-8">
    <p>Hello</p>
  </div>
  <div class="col-md-4" style="margin-top: 25px;">
    <img src="images/why/customer.jpg" alt "" />
  </div>
</div>
<div id="div2" class="targetDiv">
  <div class="col-md-8">
    <p>WORLD</p>
  </div>
  <div class="col-md-4" style="margin-top: 25px;">
    <img src="images/why/process.png" alt "" />
  </div>
</div>

Upvotes: 1

Related Questions