Hide/Show Div on button click using Jquery

问题

This is supposed to be my first Jquery code that I am writing. I have used this and many more examples to make the simplest jquery code to display Hello on Button Click(W3Schools worth mentioning). I am trying to show a div that contains the Hello in it on a button click.

<div>
<input type="button" id="btn" class="btn btn-default" value="click me">
</div>

<div id="Create" style="visibility:hidden">
Hello
</div>

@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
    $(btn).click(function () {
        $(Create).show();

    });
});
</script>
}

I have tried writing the Script code many places like in the head, after the Scripts.Render, before it. I am not really sure where i should place the Jquery code.

I have this code appended to a MVC5 application. This code is written for learning purpose. I think the other code in the View is irrelevant for the working of the Jquery.

回答1:

<div>
<input type="button" id="btn" class="btn btn-default" value="click me">
</div>

<div id="Create" style="display:none">
Hello
</div>

@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
    $("#btn").click(function () {
        $("#Create").toggle();
    });
});
</script>
}

回答2:

You Ca Check it here http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show

<!DOCTYPE html>
  <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script>
          $(document).ready(function(){
          $("#hide").click(function(){
            $("p").hide();
          });
          $("#show").click(function(){
            $("p").show();
          });
         });
     </script>
    </head>
    <body>

       <p>If you click on the "Hide" button, I will disappear.</p>

       <button id="hide">Hide</button>
       <button id="show">Show</button>

    </body>
 </html>

来源：https://stackoverflow.com/questions/33251749/hide-show-div-on-button-click-using-jquery

标签

jquery

html

asp.net-mvc-5