Question

My page has six div elements.

Using jQuery and Z-Index, clicking on a button increases the width of one div to cover all the others. In the process, it also assumes the class: active (z-index:900).

When I click another button, the div with the class active should return to its original size and position. The original values are saved into variables, but how can I know the name of the element with the active class?

Answer 1

This is one of the fundamental features of the jQuery function aka $().

Doing this:

var elements = $(".myclass");

will give you all of the elements that are using CSS class myclass. From there you can do this:

elements.css({
    left: orig_left,
    top: orig_top,
    width: orig_width,
    height: orig_height
});

The style changes will apply to all of the elements at once.

However if you wish to restore an element to its defaults (ie what was in the original html), you can do this:

elements.css({
    left: null,
    top: null,
    width: null,
    height: null
});

or even:

elements.attr("style","");