Bootstrap tabs not changing the content when clicked more than once

I have been trying to implement tab into one of my pages. The code is as follows.

<div class="row justify-content-between">
    <div class="col-lg-3">
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between text-success ml-4" href="#1" data-toggle="tab">
            <h4 class="text-success size">Vehicles</h4>
        </a>
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#2" data-toggle="tab">
            <h4 class="text-success size">Battery</h4>
        </a>
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#3" data-toggle="tab">
            <h4 class="text-success size">Charging</h4>
        </a>
    </div>

    <div class="tab-content  col-lg-9">
        <div class="tab-pane active" id="1">
            <!-- Content here -->
        </div>

        <div class="tab-pane" id="2">
            <!-- content here -->
        </div>

        <div class="tab-pane" id="3">
            <!-- content here -->
        </div>
    </div>
</div>

What I have done is, I have created two columns, one containing the links and the other containing the region where the data should be shown according to the link clicked. When run, the code actually works for once, i.e. the when the links are clicked for the first time, it shows the respective content on the right. But when I try to access another link, it does not work. It sort of works one time only. What should I do to make them work no matter how many times I want to toggle between data?

Solution

You didn't add the 'nav nav-tabs' list container for your nav-tabs. Right now your all links are working as an independent internal link. Hence it works for just one click.

Here is update code


<div class="row justify-content-between">
    <div class="col-lg-3">
<ul class="nav nav-tabs">
        <li class="active"><a class="nav-link p-3 mb-2 sidebar-link justify-content-between text-success ml-4" href="#1" data-toggle="tab">
            <h4 class="text-success size">Vehicles</h4>
        </a>
</li>

<li>
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#2" data-toggle="tab">
            <h4 class="text-success size">Battery</h4>
        </a>
</li>
<li>
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#3" data-toggle="tab">
            <h4 class="text-success size">Charging</h4>
        </a>
</li>
    </div>

    <div class="tab-content  col-lg-9">
        <div class="tab-pane fade in active" id="1">
            <!-- Content here -->
        </div>

        <div class="tab-pane fade" id="2">
            <!-- content here -->
        </div>

        <div class="tab-pane fade" id="3">
            <!-- content here -->
        </div>
    </div>
</div>

Let me know if it meets your requirements.