Bootstrap Tabs with links in a table row tr

Question

I'm looking for a way to use the bootstrap tabs as follows:

I have a table, and I want every one to be clicked on a row, it will show an image.

Can this be achieved?

The bootstrap code is as follows, but I want to apply the links to a row ''

div>

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">SHOW IMAGE 1</div>
<div role="tabpanel" class="tab-pane" id="profile">SHOW IMAGE 2</div>
<div role="tabpanel" class="tab-pane" id="messages">SHOW IMAGE 3</div>
<div role="tabpanel" class="tab-pane" id="settings">SHOW IMAGE 4</div>
</div>

I want to avoid applying it inside the td:

<td><a>....</a></td>

Because the click area would only be the text and I want it to be the row

I hope you can help me

Answer 1

​Sorry, I don't see any TABLE in your code snippet. Not very sure how you want to pop-up image when user clicks on tr.

You may be interested in accordions. Here's your fiddle:

    <button class="accordion">Home</button>
    <div class="panel">
     <img>
    </div>
    <button class="accordion">Profile</button>
    <div class="panel">
     <img>
    </div>