CODEWITHSUNDEEP
javascripthtmljquerycss
Suraj Prasad
Suraj Prasad

Reputation: 251

Show dynamic content based on clicked tab

I am trying to display content for a particular tab dynamically.

If a particular navigation tab is clicked it has to show the respective contents on the right.

Currently, it's showing all the tab information together. Is there a way this can be handled using jquery/js.

Tab:

<div class="ibm-tab-section">
            <ul class="ibm-tabs" role="tablist">
                <li><a aria-selected="true" role="tab" href="#example2b-tab1">Example 2b Tab 1</a></li>
                <li><a role="tab" href="#example2b-tab2">Example 2b Tab 2</a></li>
                <li><a role="tab" href="#example2b-tab3">Example 2b Tab 3</a></li>
                <li><a role="tab" href="#example2b-tab4">Example 2b Tab 4</a></li>
            </ul>
        </div>

Tab 1 content: 

    <div id="example2b-tab1" class="ibm-tabs-content">
            <p>Example 2b Tab 1 contents</p>
        </div>

Tab 2 content : 

<div id="example2b-tab2" class="ibm-tabs-content">
            <p>Example 2b Tab 2 contents</p>
            <form>
                <p>
                    <select>
                        <option value="">Select one</option>
                        <option value="1">Mr.</option>
                        <option value="1">Mrs.</option>
                        <option value="1">Dude</option>
                    </select>
                </p>
            </form>
        </div>

Upvotes: 0

Views: 1403

Answers (2)

Rayon
Rayon

Reputation: 36599

  • Hide all the .ibm-tabs-content elements using CSS
  • On click of the a element, hide .ibm-tabs-content element and show the respective content element on the basis of href attribute that is mapped.

$(function() {
    $("#example2b-tab1").show();
});
$('.ibm-tabs li a').on('click', function(e) {
  e.preventDefault();
  $('.ibm-tabs-content').hide();
  let IDSelector = $(this).attr('href');
  $(IDSelector).show();
})
.ibm-tabs-content {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ibm-tab-section">
  <ul class="ibm-tabs" role="tablist">
    <li><a aria-selected="true" role="tab" href="#example2b-tab1">Example 2b Tab 1</a></li>
    <li><a role="tab" href="#example2b-tab2">Example 2b Tab 2</a></li>
    <li><a role="tab" href="#example2b-tab3">Example 2b Tab 3</a></li>
    <li><a role="tab" href="#example2b-tab4">Example 2b Tab 4</a></li>
  </ul>
</div>


<div id="example2b-tab1" class="ibm-tabs-content">
  <p>Example 2b Tab 1 contents</p>
</div>


<div id="example2b-tab2" class="ibm-tabs-content">
  <p>Example 2b Tab 2 contents</p>
  <form>
    <p>
      <select>
        <option value="">Select one</option>
        <option value="1">Mr.</option>
        <option value="1">Mrs.</option>
        <option value="1">Dude</option>
      </select>
    </p>
  </form>
</div>

Upvotes: 2

Kushal Agrawal
Kushal Agrawal

Reputation: 1

You can hide and show the content of different tabs on click on the tabs using jquery and javascript by using the style property of display and making it as none.

Upvotes: 0

Related Questions