0

I want to hide the 'Click Here' option whenever a specific tab is selected. Other three 'click here' should be visible when one is selected.

I cannot figure out how to do this with two tabs doing the same thing. The image should be always visible but the click here button under the image should be hidden if it is selected.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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"><img src="http://placehold.it/140x100"></a>
      <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Click Here</a>
    </li>
    <li role="presentation">
      <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
      <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Click Here</a>
    </li>
    <li role="presentation">
      <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
      <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Click Here</a>
    </li>
    <li role="presentation">
      <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
      <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Click Here</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Content Home</div>
    <div role="tabpanel" class="tab-pane" id="profile">Content Profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">Content Messages</div>
    <div role="tabpanel" class="tab-pane" id="settings">Content Settings</div>
  </div>

</div>

Please have a look at my codepen. Code Pen Link

3 Answers 3

0

in css:

li.active a + a { display: none; }

when you click a tab, bootstrap adds the class "active" to the clicked LI. using this class, you can easely hide descending elements.

2
  • this solution is interesting...i will try to implement it..thanks man for the idea..
    – Saif Islam
    Oct 11, 2015 at 13:55
  • your answered worked for me great...thank you very much man..cheers !!
    – Saif Islam
    Oct 12, 2015 at 14:09
0

this css should do the trick

.nav-tabs li img{
    display:none;
}

.nav-tabs li.active img{
    display:block;
}

https://jsfiddle.net/4f89746o/

0

So if i've good understood what you need, this is a really basic solution. First add some IDs to your buttons and then write some functions like the following ones. I wronte only 2 of them. In these functions if you click one button, the other are displayed and the one clicked is set hidden :)

$( "#homeImg" ).click(function() {
 $("#homeBtn").hide(500);
 $("#profileBtn").show();
});

$( "#homeBtn" ).click(function() {
 $("#homeBtn").hide(500);
 $("#profileBtn").show();
});

$( "#profileBtn" ).click(function() {
 $("#homeBtn").show();
 $("#profileBtn").hide(500);
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>

      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active" >
          <a href="#home" aria-controls="home" role="tab" id="homeImg" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
          <a href="#home" aria-controls="home" role="tab" id="homeBtn" data-toggle="tab">Click Here</a>
        </li>
        <li role="presentation">
          <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
          <a href="#profile" aria-controls="profile" role="tab" id="profileBtn" data-toggle="tab">Click Here</a>
        </li>
        <li role="presentation">
          <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
          <a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Click Here</a>
        </li>
        <li role="presentation">
          <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"><img src="http://placehold.it/140x100"></a>
          <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Click Here</a>
        </li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">Content Home</div>
        <div role="tabpanel" class="tab-pane" id="profile">Content Profile</div>
        <div role="tabpanel" class="tab-pane" id="messages">Content Messages</div>
        <div role="tabpanel" class="tab-pane" id="settings">Content Settings</div>
      </div>

    </div>

3
  • Thanks Marco..your solution seems to me partially OK...because as per your solution Click here button only hides whenever it(only the button) is clicked, but I want click here button to hide even if I click the image above it ? Hope you understand what I mean...How can i achieve it ?
    – Saif Islam
    Oct 11, 2015 at 13:44
  • I added a new ID for the first image, and I called it #homeImg, then I added a new function in JS similar to the other ones :) Check the edited post!
    – Marco
    Oct 11, 2015 at 13:53
  • thanks man..sounds OK to me..just need to make it little bit more dynamic according to my need...thanks anyway for the idea...cheers !!
    – Saif Islam
    Oct 11, 2015 at 14:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.