Hiding the content elements inside a div using jquery

Question

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 1

I have modified your code as per your requirement. Please check and let me know if you have any query.

$(document).ready(function(){
    $("#divSearch").hide();
    $("#showSearch").on("click",function(){
        $("#divSearch").show();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse navbar-collapse searchbar-navbar" id="bs-navbar-search">
  <form class="navbar-form navbar-left" role="search">
    <div class="form-group" id="divSearch">
      <input type="text" class="form-control" placeholder="Search" id="navbar-search-box">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>   
    <input type="submit" id="showSearch" value="Show Search Field"/>
  </form>

</div>

Answer 2

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>

Answer 3

`<script>`
$(document).ready(function(){

        $("#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>

Answer 4

Hiding the children of the div works fine for me... Just use $("#bs-navbar-search").children().hide(); to hide the elements within the div. Run the code snippet and see for yourself (it doesn't show anything because it is hiding the elements). Are you sure you are using the jQuery library and have linked your javascript source correctly? Also your javascript/jQuery code you used has commas which you shouldn't use, but I'm not sure if you did that just to show us what you have tried or if that is your actual code.

Anyway, this should do this trick:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <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>

Answer 5

Your code works, but there is a few mistakes :

• You need to remove ',' at the end of jquery function
• You just need to hide #bs-navbar-search div. It will hide everything it englobes (your input and submit will be hidden).
• I didn't see including jQuery maybe you did it in another part of your code.
• If you put this jQuery code at the beginning of your page, you need to wrap it in document.ready

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<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>

Answer 6

You can do it many ways. You can use my code, it should work. You should load the jquery library before.

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

Show Div

<script>

$( document ).ready(function() { $("#bs-navbar-search").hide();

function myFunction() {
    $("#bs-navbar-search").show();
}

});