Twitter Bootstrap Question posted in

hidden text is hidden and will not be displayed – Twitter bootstrap

Below is my coding for creating tabs. In each i have one drop down when i select the value india in each tabs in the hidden textbox should display on the particular tab means if i select the value india in tab1 dropdown hidden textbox should not display tab2 and tab3 and i need to change w3-border red to #00a8a8 color

function openCity(evt, cityName) {

  var i, x, tablinks;
  x = document.getElementsByClassName("sendingType");

  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(
      " w3-border-red", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.firstElementChild.className += " w3-border-red";
}


$(document).ready(function() {
  $("#ddlPassport").change(function() {
    if ($(this).val() == "Y") {
      $("#dvPassport").show();
    } else {
      $("#dvPassport").hide();
    }
  });
});

$(document).ready(function() {
  $("#ddlPassport1").change(function() {
    if ($(this).val() == "Y") {
      $("#dvPassport").show();
    } else {
      $("#dvPassport").hide();
    }
  });
});

$(document).ready(function() {
  $("#ddlPassport2").change(function() {
    if ($(this).val() == "Y") {
      $("#dvPassport").show();
    } else {
      $("#dvPassport").hide();
    }
  });
});
.sendingType {
  display: none;
}
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<body class="w3-container">

  <h2>Tabs in a Grid</h2>

  <div class="w3-row">
    <a href="#" onclick="openCity(event, 't1');">
      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab1

      </div>
    </a>
    <a href="#" onclick="openCity(event, 't2');">
      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab2</div>
    </a>
    <a href="#" onclick="openCity(event, 't3');">
      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab3</div>
    </a>
  </div>
  <br>

  <div id="t1" class="w3-container sendingType">

    <div class="form-group">
      <label class="col-xs-1 control-label">dropdown</label>
      <div class="col-xs-3">
        <select name="country" class="form-control" id="ddlPassport">
          <option value="">Select a country</option>
          <option value="Y">india</option>
          <option value="N">america</option>
        </select>
      </div>
    </div>



    <div id="dvPassport" style="display: none">
      <div class="form-group">
        <label class="col-xs-1 control-label">Text box</label>
        <div class="col-xs-3">
          <input type="text" class="form-control">
        </div>
      </div>
    </div>



  </div>



  <div id="t2" class="w3-container sendingType">


    <div class="form-group">
      <label class="col-xs-1 control-label">dropdown</label>
      <div class="col-xs-3">
        <select name="country" class="form-control" id="ddlPassport1">
          <option value="">Select a country</option>
          <option value="Y">india</option>
          <option value="N">america</option>
        </select>
      </div>
    </div>
    <div id="dvPassport1" style="display: none">
      <div class="form-group">
        <label class="col-xs-1 control-label">Text box</label>
        <div class="col-xs-3">
          <input type="text" class="form-control">
        </div>
      </div>
    </div>


  </div>

  <div id="t3" class="w3-container sendingType">


    <div class="form-group">
      <label class="col-xs-1 control-label">dropdown</label>

      <div class="col-xs-3">
        <select name="country" class="form-control" id="ddlPassport2">
          <option value="">Select a country</option>
          <option value="Y">india</option>
          <option value="N">america</option>
        </select>
      </div>
    </div>
    <div id="dvPassport2" style="display: none">
      <div class="form-group">
        <label class="col-xs-1 control-label">Text box</label>
        <div class="col-xs-3">
          <input type="text" class="form-control">
        </div>
      </div>

    </div>
  </div>
</body>
Tags:

2

Answers


  1. 0

    You are using the same hidden textbox ID every time. Us the respective textbox id. Also you don’t need to use ready function every time. You can use once and add all the other function in it.

    $(document).ready(function() {  
$("#ddlPassport").change(function() {
    if ($(this).val() == "Y") {
      $("#dvPassport").show();
    } else {
      $("#dvPassport").hide();
    }
  });
});


  $("#ddlPassport1").change(function() {
    if ($(this).val() == "Y") {
      $("#dvPassport1").show();
    } else {
      $("#dvPassport1").hide();
    }
  });


  $("#ddlPassport2").change(function() {
    if ($(this).val() == "Y") {
      $("#dvPassport2").show();
    } else {
      $("#dvPassport3").hide();
    }
  });
});
    Login or Signup to reply.
  2. 0 
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
function openCity(evt, cityName) {

var i, x, tablinks;
x = document.getElementsByClassName("sendingType");

for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
  tablinks[i].className = tablinks[i].className.replace(
    " w3-border-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.firstElementChild.className += " w3-border-red";
}


$(document).ready(function() {
$("#ddlPassport").change(function() {
  if ($(this).val() == "Y") {
    $("#dvPassport").show();
  } else {
    $("#dvPassport").hide();
  }
});
});

$(document).ready(function() {
$("#ddlPassport1").change(function() {
  if ($(this).val() == "Y") {
    $("#dvPassport1").show();
  } else {
    $("#dvPassport1").hide();
  }
});
});

$(document).ready(function() {
$("#ddlPassport2").change(function() {
  if ($(this).val() == "Y") {
    $("#dvPassport2").show();
  } else {
    $("#dvPassport2").hide();
  }
});
});


</script>
<style>
.sendingType {
display: none;
</style>
<body class="w3-container">

<h2>Tabs in a Grid</h2>

<div class="w3-row">
  <a href="#" onclick="openCity(event, 't1');">
    <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab1

    </div>
  </a>
  <a href="#" onclick="openCity(event, 't2');">
    <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab2</div>
  </a>
  <a href="#" onclick="openCity(event, 't3');">
    <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">tab3</div>
  </a>
</div>
<br>

<div id="t1" class="w3-container sendingType">

  <div class="form-group">
    <label class="col-xs-1 control-label">dropdown1</label>
    <div class="col-xs-3">
      <select name="country" class="form-control" id="ddlPassport">
        <option value="">Select a country</option>
        <option value="Y">india</option>
        <option value="N">america</option>
      </select>
    </div>
  </div>



  <div id="dvPassport" style="display: none">
    <div class="form-group">
      <label class="col-xs-1 control-label">Text box1</label>
      <div class="col-xs-3">
        <input type="text" class="form-control">
      </div>
    </div>
  </div>



</div>



<div id="t2" class="w3-container sendingType">


  <div class="form-group">
    <label class="col-xs-1 control-label">dropdown2</label>
    <div class="col-xs-3">
      <select name="country" class="form-control" id="ddlPassport1">
        <option value="">Select a country</option>
        <option value="Y">india</option>
        <option value="N">america</option>
      </select>
    </div>
  </div>
  <div id="dvPassport1" style="display: none">
    <div class="form-group">
      <label class="col-xs-1 control-label">Text box2</label>
      <div class="col-xs-3">
        <input type="text" class="form-control">
      </div>
    </div>
  </div>


</div>

<div id="t3" class="w3-container sendingType">


  <div class="form-group">
    <label class="col-xs-1 control-label">dropdown3</label>

    <div class="col-xs-3">
      <select name="country" class="form-control" id="ddlPassport2">
        <option value="">Select a country</option>
        <option value="Y">india</option>
        <option value="N">america</option>
      </select>
    </div>
  </div>
  <div id="dvPassport2" style="display: none">
    <div class="form-group">
      <label class="col-xs-1 control-label">Text box3</label>
      <div class="col-xs-3">
        <input type="text" class="form-control">
      </div>
    </div>

  </div>
</div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search