Show dynamic content based on clicked tab

Question

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>

Answer 1

• 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>

Answer 2

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.