Question

I would like to use some ajax in a project but I can’t seem to get it working, just to try it out I have made a button in one of my views with which I want to hide (slideUp) the whole body

I have tried this code inside my view:

<script src="@Url.Content("http://code.jquery.com/jquery-latest.js")></script>

 <script type="text/javascript" >$("button#hideAll").click(function ()
         {
            if ($("body").is(":hidden")) {
                  $("body").show("slow");
            } else {
                  $("body").slideUp();
                   }
             });{
 </script>

ps: if you have any other remarks on the layout etc, I’d be glad to hear them too.

EDIT:
This is some more of the html code btw:

<p id="uitlegToonStudenten">Hieronder ziet u 2 lijsten van studenten. U kan één of meerdere studenten selecteren om hen naar de andere lijst van studenten te verplaatsen.</p>
<hr>

<button id="hideAll">hide All!</button>

EDIT:
update on code (still doesn’t work:)

<button id="hideAll">hide All!</button>
<div id="bodyFake">

<p id="uitlegToonStudenten">Hieronder ziet u 2 lijsten van studenten. U kan één of meerdere studenten selecteren om hen naar de andere lijst van studenten te verplaatsen.</p>
<hr>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("http://code.jquery.com/jquery-latest.js") type="text/javascript"></script>

 <script type="text/javascript" >
  $(function () {
         $("button#hideAll").click(function () {
             if ($("div#bodyFake").is(":hidden")) {
                 $("div#bodyFake").slideDown();
             } else {
                 $("div#bodyFake").slideUp();
             }
         });
     });
 </script>

As you can see I’ve put the everyting in a ‘fake’ body div and put the button above (there is more code and I close the div at the end)
EDIT2:
this was the ‘big mistake’:

<script src="http://code.jquery.com/jquery-1.6.2.js" type="text/javascript"></script>

Answer 1

Wrap your code in $(function(){..} that way it will ensure that the element is available before it tries to access it. Also to show the element you can use slideDown which is the opposite of slideUp. There is an extra opening brace in your code remove it. You can try this.

Working demo

  $(function () {
     $("#hideAll").click(function () {

         if ($("div#bodyFake").is(":hidden")) {
             $("div#bodyFake").slideDown();
         } else {
             $("div#bodyFake").slideUp();
         }
     });
  });