Tips for concealing a tab upon selecting an option from a dropdown menu

Question

Tips for concealing a tab upon selecting an option from a dropdown menu

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

When selecting music, I need to hide the image tab and when clicking on anything else, the song tab should be hidden. I attempted using CSS to set display none but it did not work as expected.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

Check out the method provided below:

$(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 must hide() the <a> tag of Tab and also use removeClass("in") for the respective tab content before displaying the other tab.

Answer 2

Check out the method provided below:

$(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 must hide() the <a> tag of Tab and also use removeClass("in") for the respective tab content before displaying the other tab.

Answer 3

Answer №2

Add an identifier or a class to the

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

Assign an ID or class to the Song tab

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

Next, listen for any changes made.

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

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

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

   if(strSelectedVal=="music"){

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

    }else{

        $("#song-tab").hide();
    }
})

Answer 4

Add an identifier or a class to the

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

Assign an ID or class to the Song tab

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

Next, listen for any changes made.

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

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

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

   if(strSelectedVal=="music"){

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

    }else{

        $("#song-tab").hide();
    }
})

Answer 5

Answer №3

Include an ID for the select element:

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

Next, you need to monitor the selected option and switch from displaying the image tab to showing a different tab (presumably the song tab) when the value is music.

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

I've also made some minor adjustments to your HTML.

VIEW CODEPEN EXAMPLE

Answer 6

Include an ID for the select element:

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

Next, you need to monitor the selected option and switch from displaying the image tab to showing a different tab (presumably the song tab) when the value is music.

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

I've also made some minor adjustments to your HTML.

VIEW CODEPEN EXAMPLE

Answer 7

Answer №4

To manipulate the visibility of different tabs, you can utilize the bootstrap classes fade in and fade.

For instance, if you wish to hide the song tab and display the image tab instead, follow these steps:

Start by assigning an id to your select element:

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

Then retrieve the selected value using the following script:

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

Lastly, based on the selected value, toggle the visibility of your tabs like so:

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

Answer 8

To manipulate the visibility of different tabs, you can utilize the bootstrap classes fade in and fade.

For instance, if you wish to hide the song tab and display the image tab instead, follow these steps:

Start by assigning an id to your select element:

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

Then retrieve the selected value using the following script:

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

Lastly, based on the selected value, toggle the visibility of your tabs like so:

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

Tips for concealing a tab upon selecting an option from a dropdown menu

Answer №1

Answer №2

Answer №3

VIEW CODEPEN EXAMPLE

Answer №4

Similar questions

React component making repeated calls to my backend server

The controller method in MVC is not receiving the expected data

Encountering issues while trying to install Java using NPM

Switch up the text when the image link is being hovered over

Execute a function determined by the radio button value fetched from the database

Contrast between utilizing filter_input and accessing $_POST directly following an asynchronous AJAX request

The server encountered an unexpected error while processing the request, possibly due to a

The Material-ui DatePicker seems to be malfunctioning and as a result, the entire form is not

What purpose do controller.$viewValue and controller.$modelValue serve in the Angular framework?

Is there a way to change a model attribute in JSP based on the AJAX response?

Cannot use MaterialUI Textfield/Input on iPhone devices

How to incorporate markdown files as strings in Next.js

Fetching JSON data cross-domain with the help of JavaScript or JQuery

Graphic descending within container

Refresh jQuery CSS for active button whenever a different button is clicked

Is it possible to resend an AJAX request using a hyperlink?

Headers cannot be set once they have already been sent in an express js application

The bootstrap table did not meet my expectations as I had hoped

Implement the click event binding using classes in Angular 2

What is the method for embedding a concealed form within a table?