title: How to remove z-index property using jQuery
body: <p>I am creating a website in which there are <strong>4 divs of equal dimensions</strong>. If I <strong>click</strong> any div it would <strong>maximize to cover the remaining 3 divs</strong>. To achieve this I need to use <strong>z-index</strong> property. I do not specify z-index in the style and only add it using jQuery when I click any div. Here is my code for a div:</p>
  
  <pre><code>&lt;div id="one" style="background: #58D3F7; height: 200px; width: 200px; position: absolute;
      margin-left: 410px; margin-top: 202px; float: left; cursor: pointer; text-align: center;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And here is jQuery code for maximizing:</p>
  
  <pre><code>$(function () {
      var state = true;
      $("#one").click(function () {
          if (state) {
              $("#one").animate({
                  height: 300,
                  top: -100
              }, 1000);
              $("#one").css({ "z-index": "1" });
              $("#one").animate({
                  width: 300,
                  left: -100
              }, 1000);
              $("#itxt1").animate({
                  color: "#58D3F7"
              }, 1000);
              $("#one").animate({
                  height: 650,
                  width: 650
              }, 1000);
          } else {
              $("#one").animate({
                  backgroundColor: "#58D3F7",
                  height: 200,
                  width: 200,
                  left: 8,
                  top: 8,
                  opacity: 1
              }, 1000);
              $("#one").removeAttr("z-index");
          }
          state = !state;
      });
  });
  </code></pre>
  
  <p>The above code works fine except when I click the div second time to minimize it, the z-index property remains. I want it to go. How can I achieve this?</p>