Kabera Mugwaneza Alexis Kabera Mugwaneza Alexis - 1 month ago 13
Javascript Question

How to show and hide with jquery bootstrap

i am able to show hidden DIV when i click to select item2 with id= 1 and i need if i click to item 0 of id =0 hide again the shown DIV.

div class="ddl-select input-group-btn">
<select id="search-engine-combobox" class="selectpicker show-tick form-control" data-style="btn btn-default " onchange="showDiv(this)" >
<option value="0">All Banks</option>
<option value="1">Bank Type</option>
</select>
</div>

<div class="form-group " id="hidden_div" style="display: none;" >

<select id="banktype" class="selectpicker show-tick bank-type">
<option data-icon="glyphicon-heart">Microfinance</option>
<option data-icon="glyphicon-heart">Home loan</option>
<option data-icon="glyphicon-heart">certificate deposit</option>
</select>
</div>


<script type='text/javascript'>
function showDiv(elem){
if(elem.value == 1)
document.getElementById('hidden_div').style.display = "block";
}
else if (elem.value == 0) {}{
???????
}

</script>

Answer

Check the below which is what you expected I hope :-)

<div class="ddl-select input-group-btn">
 <select id="search-engine-combobox" class="selectpicker show-tick form-control" data-style="btn btn-default " onchange="showDiv(this)" >
              <option value="0">All Banks</option>  
              <option value="1">Bank Type</option>  
            </select>
          </div>

 <div class="form-group " id="hidden_div" style="display: none;" >

  <select id="banktype"  class="selectpicker show-tick bank-type">
    <option data-icon="glyphicon-heart">Microfinance</option>
    <option data-icon="glyphicon-heart">Home loan</option>
    <option data-icon="glyphicon-heart">certificate deposit</option>
  </select>
</div>


<script type='text/javascript'>
function showDiv(elem){
  var targetElm = document.getElementById('hidden_div');
   if(elem.value == 1) {
     targetElm.style.display = "block";
   }
  else if (elem.value == 0) {
     targetElm.style.display = "none";
   }
  
  }

 </script>