Jquery show div reversed

Question

I am building a simple website with jQuery and I have a small question:

I have the following program:

$(document).ready(function() {
  $('#nr1').click(function() {
    var $this = $(this);
    if ($this.hasClass("clicked-once")) {
      $('#nr1').animate({
        width: "290px",
        height: "190px"
      }, 400);
      setTimeout(function() {
        $("#nr2").fadeIn('fast');
        $("#nr3").fadeIn('fast');
        $("#nr4").fadeIn('fast');
      }, 375);
      $this.removeClass("clicked-once");
    } else {
      $this.addClass("clicked-once");
      $('#nr1').animate({
        width: "600px",
        height: "400px"
      }, 400);
      $("#nr2").fadeOut('fast');
      $("#nr3").fadeOut('fast');
      $("#nr4").fadeOut('fast');
    }
  });

  $('#nr2').click(function() {
    var $this = $(this);
    if ($this.hasClass("clicked-once")) {
      $('#nr2').animate({
        width: "290px",
        height: "190px"
      }, 400);
      setTimeout(function() {
        $("#nr1").fadeIn('fast');
        $("#nr3").fadeIn('fast');
        $("#nr4").fadeIn('fast');
      }, 375);
      $this.removeClass("clicked-once");
    } else {
      $this.addClass("clicked-once");
      $('#nr2').animate({
        width: "600px",
        height: "400px"
      }, 400);
      $("#nr1").fadeOut('fast');
      $("#nr3").fadeOut('fast');
      $("#nr4").fadeOut('fast');
    }
  });

  $('#nr3').click(function() {
    var $this = $(this);
    if ($this.hasClass("clicked-once")) {
      $('#nr3').animate({
        width: "290px",
        height: "190px"
      }, 400);
      setTimeout(function() {
        $("#nr1").fadeIn('fast');
        $("#nr2").fadeIn('fast');
        $("#nr4").fadeIn('fast');
      }, 375);
      $this.removeClass("clicked-once");
    } else {
      $this.addClass("clicked-once");
      $('#nr3').animate({
        width: "600px",
        height: "400px"
      }, 400);
      $("#nr1").fadeOut('fast');
      $("#nr2").fadeOut('fast');
      $("#nr4").fadeOut('fast');
    }
  });

  $('#nr4').click(function() {
    var $this = $(this);
    if ($this.hasClass("clicked-once")) {
      $('#nr4').animate({
        width: "290px",
        height: "190px"
      }, 400);
      setTimeout(function() {
        $("#nr1").fadeIn('fast');
        $("#nr2").fadeIn('fast');
        $("#nr3").fadeIn('fast');
      }, 375);
      $this.removeClass("clicked-once");
    } else {
      $this.addClass("clicked-once");
      $('#nr4').animate({
        width: "600px",
        height: "400px"
      }, 400);
      $("#nr1").fadeOut('fast');
      $("#nr2").fadeOut('fast');
      $("#nr3").fadeOut('fast');
    }
  });

});

@charset "utf-8";

/* CSS Document */

* {
  margin: 0;
  padding: 0
}
/* mac hide \*/

html,
body {
  height: 100%;
  width: 100%;
}
/* end hide */

body {
  background-image: url(backgroundNY.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  text-align: center;
  min-height: 468px;
  /* for good browsers*/
  min-width: 552px;
  /* for good browsers*/
}
#container {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 100;
  height: 400px;
  margin-top: -200px;
  width: 600px;
  margin-left: -300px;
}
#nr1 {
  font-family: Verdana, Geneva, sans-serif;
  line-height: 200px;
  color: #999999;
  font-size: xx-large;
  border-radius: 10px;
  width: 290px;
  height: 190px;
  margin-left: 0px;
  margin-top: 0px;
  background-color: #ECDEC2;
  position: absolute;
}
#nr2 {
  font-family: Verdana, Geneva, sans-serif;
  line-height: 200px;
  color: #999999;
  font-size: xx-large;
  border-radius: 10px;
  width: 290px;
  height: 190px;
  margin-left: 310px;
  margin-top: 0%;
  background-color: #ECDEC2;
  position: absolute;
}
#nr3 {
  font-family: Verdana, Geneva, sans-serif;
  line-height: 200px;
  color: #999999;
  font-size: xx-large;
  border-radius: 10px;
  width: 290px;
  height: 190px;
  margin-left: 0%;
  margin-top: 210px;
  background-color: #ECDEC2;
  position: absolute;
}
#nr4 {
  font-family: Verdana, Geneva, sans-serif;
  line-height: 200px;
  color: #999999;
  font-size: xx-large;
  border-radius: 10px;
  width: 290px;
  height: 190px;
  margin-left: 310px;
  margin-top: 210px;
  background-color: #ECDEC2;
  position: absolute;
}

<body>
  <div id="container">
    <div id="nr1">
      Placeholder
    </div>

    <div id="nr2">
      Placeholder
    </div>

    <div id="nr3">
      Placeholder
    </div>

    <div id="nr4">
      Placeholder
    </div>
  </div>
</body>

As you can see I have 4 placeholders, if I click the first placeholder you'll see that it does what it is suppodes to do, it opens up and it can close down. When you'll click another one it does exactly the same, but that is not really what I am looking for. What I am looking for is when I click another placeholder it opens up to the opposite corner. So the placeholder in the left down corner should open to the right upper corner, but I don't know how to do that, I have tried it with changing the margins but that didn't work. I hope someone can help me out with this one.

score 0 · Accepted Answer · answered May 22 '13 at 12:48

0

give positions for the boxes:

First box: top: 0; left: 0;

Second: top: 0; right: 0;

Third: bottom: 0; left: 0;

etc.

http://jsfiddle.net/fPTNk/2/

answered May 22 '13 at 12:48

Seer

724
4
21

Jquery show div reversed

1 Answers1