Reputation: 1180

How to remove z-index property using jQuery

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?

Upvotes: 5

Answers (4)

jeroen.verhoest

Reputation: 5183

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.

Upvotes: 5

Denys Séguret

Reputation: 382274

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.

Upvotes: 15