Twitter Bootstrap Question posted in

how to hide tab when clicked on a select option – Twitter bootstrap

<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.

Tags:

4

Answers


  1. 0

    You have just to add and remove bootstrap classes fade in and fade.

    for example if you want to hide the song tab and show the image tab, you will have to do the following:

    First give your select an id

    <select id="sel" class="form-control">

    Then get the selected value like this:

    <script>
     $('#sel').on('change', function() {
         alert(this.value);
     });
</script>

    Finally, according to the selected value, hide and show your tabs:

    <script>
     $('#sel').on('change', function() {
         if(this.value === 1){
              // hide image tab and show song tab
              $("#image").removeClass("fade in active");
              $("#image").addClass("fade");
              $("#song").removeClass("fade");
              $("#song").addClass("fade in active");
         } else {
              // hide song tab and show image tab
              $("#song").removeClass("fade in active");
              $("#song").addClass("fade");
              $("#image").removeClass("fade");
              $("#image").addClass("fade in active");
         }
     });
</script>
    Login or Signup to reply.
  2. 0

    Give some id or class to <select class="form-control" id="my-select">

    Give id or class to Song tab 

    <li class="active" id="song-tab"><a data-toggle="tab" href="#song">Song</a></li>

    then check for change event.

        $("#my-select").on('change',function(){

    var strSelectedVal = $(this).val();

    $(".nav.nav-tabs li").show();

   if(strSelectedVal=="music"){

        $("#image-tab").hide();

    }else{

        $("#song-tab").hide();
    }
})
    Login or Signup to reply.
  3. 0

    Add ID for your select:

    <select id="select" class="form-control">
  Options
</select>

    Then you have to check the value of the selected option and hide the image tab when it is music by showing another tab (I expect that you want to change to song tab).

    $('#select').change(function() {
  if($(this).val() === '1') {
    $('#song-tab').tab('show');
  }
});

    I also made some minor changes in your HTML.

    CODEPEN

    Login or Signup to reply.
  4. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search