How to remove z-index property using jQuery

Question

I am creating a website in which there are 4 divs of equal dimensions. If I click any div it would maximize to cover the remaining 3 divs. To achieve this I need to use z-index 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:

<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;"></div>

And here is jQuery code for maximizing:

$(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;
    });
});

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?

Answer 1

The z-index isn't an attribute.

As stated in the documentation, you can do

$("#one").css("z-index", '');

Extract from the documentation :

Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or element.

Answer 2

Use initial to reset z-index back to its default value

$('#id').css('z-index','initial');

CSS Syntax

z-index: auto|number|initial|inherit;

• auto: Sets the stack order equal to its parents. This is default
• number: Sets the stack order of the element. Negative numbers are allowed
• initial: Sets this property to its default value. Read about initial
• inherit: Inherits this property from its parent element.

Answer 3

You can remove using .css() in jQuery

$('#id').css('z-index','');

try like this

Answer 4

Instead of:

$("#one").removeAttr("z-index");

Remove it from the CSS:

$("#one").css("z-index", "");

Or, perhaps

$("#one").css("z-index", "auto");