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

Organize Dates in React Table

Share your Facebook link with dynamic parameters

Could you share the most effective method for implementing a live search feature using javascript or jquery?

What is the best way to utilize the isset method in PHP to check for the existence of two different

Tips for showcasing log information on an ASP.net MVC4 website using AJAX

Ways to determine if a web browser is executing javascript code (without altering the javascript on the webpage)

Issue with Material-UI tab not showing the component upon page load

Delivering XML in response to a webmethod call

HTML5 Advanced API Integration with Vimeo

I have implemented an email validation form in Angular, however, if the validation is not properly handled, the data will still be stored. How

I'm having an issue where whenever I click on a different page, I keep getting redirected back to the first page

When the content is clicked, it slides up

The Challenge of Referencing Javascript Files (including jQuery)

Maintain the same javascript variable throughout multiple pages

Optimal code structuring for a javascript plugin

The Jqueryui image link is not displaying the image despite no error being reported

CSS3 animations can sometimes result in incorrect element sizing due to the animation-fill-mode property

"Troubleshooting a matter of spacing in HTML5 body

The asynchronous functionality for reading and writing files from 'fs' is not functioning properly

Tool for controlling the layout of the viewport with Javascript