Prakash Prakash - 4 months ago 9
HTML Question

Hiding the content elements inside a div using jquery

I need to hide the the input and button elements inside a div when the document loads. The div is to be shown only after a button is clicked. My html code is:



$("#bs-navbar-search").hide();,

$("#bs-navbar-search").children().hide();,

$("#bs-navbar-search form div input, #bs-navbar-search form button").hide();

<div class="collapse navbar-collapse searchbar-navbar" id="bs-navbar-search">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" id="navbar-search-box">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

</div>





But none of the JQuery code above seem to be working. Am I doing any wrong here. Please help.

Answer

You forgot to include jQuery.(in the editor on the left side you can select it)

$(document).ready(function(){
  
  $("#bs-navbar-search").hide();
  $('#show').click(function(){
    $("#bs-navbar-search").show();  
  });
  $('#toggle').click(function(){
    $("#bs-navbar-search").toggle();  
  });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="show">Show</button>
<button id="toggle">Toggle</button> //just for a test

<div class="collapse navbar-collapse searchbar-navbar" id="bs-navbar-search">
  <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
    <input type="text" class="form-control" placeholder="Search" id="navbar-search-box">
    </div>
  <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div>