Saugat Thapa Saugat Thapa - 5 months ago 31
CSS Question

how to hide tab when clicked on a select option

<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#song">Song</a></li>
<li id="image-tab"><a href="#image" data-toggle="tab">Image</a></li>
</ul>

<div class="tab-content">
<div id="image" class="tab-pane fade ">
<input class="btn btn-default btn-sm" type="file" name="userfile" id="image">
</div>
</div>

<div id="song" class="tab-pane fade in active">
<div class="form-group">
<input id="song-link" placeholder="Paste Soundcloud link here" type="text">
</div>
</div>

<div class="form-group">
<select class="form-control">
<option value="1">Music</option>
<option value="2">Photography</option>
<option value="3">Painting</option>
<option value="4">Fashion</option>
<option value="5">Modelling</option>
</select>
</div>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>




I have to hide image tab when I select music and song tab when I click the rest. I have tried to use display none using CSS but it didn't work.

Answer

Have a look at below approach:

$(document).ready(function() {
  $(".form-control").change(function() {
    setTabVisibility();
  });

  setTabVisibility();

  function setTabVisibility() {
    var selectedVal = $(".form-control").val();
    if (selectedVal == "1") {
      //Music selected 
      $("a[href='#image']").hide();
      $("div#image").hide().removeClass("in");;

      $("a[href='#song']").show()
      $("div#song").show().addClass("in");

      $('.nav-tabs a[href="#song"]').tab('show');

    } else {
      //other than Music selected 
      $("a[href='#song']").hide();
      $("div#song").hide().removeClass("in");

      $("a[href='#image']").show()
      $("div#image").show().addClass("in");

      $('.nav-tabs a[href="#image"]').tab('show');


    }
  }
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs">
  <li><a data-toggle="tab" href="#song">Song</a>
  </li>
  <li id="image-tab"><a href="#image" data-toggle="tab">Image</a>
  </li>
</ul>

<div class="tab-content">
  <div id="image" class="tab-pane fade  ">

    <input class="btn btn-default btn-sm" type="file" name="userfile" id="imageupload">



  </div>


  <div id="song" class="tab-pane fade in active">
    <div class="form-group">
      <input id="song-link" placeholder="Paste Soundcloud link here" type="text">
    </div>

  </div>
</div>

<div class="form-group">
  <select class="form-control">
    <option value="1">Music</option>
    <option value="2">Photography</option>
    <option value="3">Painting</option>
    <option value="4">Fashion</option>
    <option value="5">Modelling</option>
  </select>
</div>

We need to hide() the <a> tag of Tab as well as need to removeClass("in") from corresponding tab content before showing the other tab.