Hide/Show Div on button click using Jquery

jquery html asp.net-mvc-5

72,414

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

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

Solution 3

$(document).ready(function () {
   $("#btn").click(function () {
     $("#btn").click(function () { $("#Create").show();
   });
});

72,414

Author by

Vini

I started using SO in 2014 during my first development job in C#. Ever since I have been reading and learning a lot from SO. I am person with great hopes in Entrepreneurship but not forgetting the development skills that I have learned so far and still learning. I always am open to opportunities to meet people and learn new things. I always love the moment when I can think, "I would have never thought about it this way". Technology and people never cease to amaze me.

Updated on June 18, 2021

Comments

Vini almost 3 years
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.
borchvm over 3 years

While this code may provide a solution to the question, it's better to add context as to why/how it works. This can help future users learn, and apply that knowledge to their own code. You are also likely to have positive feedback from users in the form of upvotes, when the code is explained.
Dima Kozhevin over 3 years

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.