I need some help, i have order list has nav-bar tab. When clicked it should populate div card styled with image inside. E.g step 1 if i click this tab must be able to see div card of this and this case must appear a div card with image. So forth.
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#step1">Step 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#step2">Step 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#step3">Step 3</a>
</li>
</ul>
</div>
<div class="col-sm-8">
<div class="tab-content">
<div id="step1" class="tab-pane active">
<div class="card">
<img class="card-img-top" src="path/to/image1.jpg" alt="Step 1 Image">
<div class="card-body">
<h5 class="card-title">Step 1 Title</h5>
<p class="card-text">Step 1 Description</p>
</div>
</div>
</div>
<div id="step2" class="tab-pane">
<div class="card">
<img class="card-img-top" src="path/to/image2.jpg" alt="Step 2 Image">
<div class="card-body">
<h5 class="card-title">Step 2 Title</h5>
<p class="card-text">Step 2 Description</p>
</div>
</div>
</div>
<div id="step3" class="tab-pane">
<div class="card">
<img class="card-img-top" src="path/to/image3.jpg" alt="Step 3 Image">
<div class="card-body">
<h5 class="card-title">Step 3 Title</h5>
<p class="card-text">Step 3 Description</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
