Click here to Skip to main content
15,922,427 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi Team

I need some help with my nav-bar tab, i want when a tab is clicked it should display a div card next to it from the right hand side. So i got only 3 nav bar tabs want them to do the same each time when clicked there should be a display div card with image inside as well details and description of the item within a div card.

What I have tried:

<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>
Posted
Comments
Mike Hankey 31-Mar-23 8:08am    
What is not working?
I have it showing a card to the right of all 3 tabs and it changes according to the tab clicked.
Gcobani Mkontwana 31-Mar-23 8:49am    
@Mike Hankey mind showing me on your side if this is working. Image and div are not displaying when clicked.
Richard Deeming 31-Mar-23 9:38am    
The code you've posted, when correctly linked to the Bootstrap v4.6 files, works as described:
Edit fiddle - JSFiddle - Code Playground[^]

So what is the problem?
Gcobani Mkontwana 31-Mar-23 9:46am    
@Richard Deeming i know it works, but i need slider when its clicked so each time arrow slider is clicked it display that image of that step1 or step2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900