I've made a simple drawer using CSS3 and jQuery that works with hover and click. It seems to be working fine but surely there's a simpler way of writing the code.Fiddle: http://jsfiddle.net/73MpU/$(#bottom-page).click(function () {    $(#top-page).addClass(push);});$(#bottom-page).mouseover(function () {    $(#top-page).addClass(nudge-right);});$(#bottom-page).mouseleave(function () {    $(#top-page).removeClass(nudge-right);});$(#top-page).click(function () {    $(this).removeClass(push);    $(this).removeClass(nudge-left);});$(#top-page).mouseover(function () {    if ($(this).hasClass(push)) {        $(this).addClass(nudge-left);    }});$(#top-page).mouseleave(function () {    if ($(this).hasClass(push)) {        $(this).removeClass(nudge-left);    }});So, I simplified my code a bit. Is this valid?Edit:$(#bottom-page).hover(function () {    $(#top-page:not(.push)).toggleClass(nudge-right);});$(#bottom-page).click(function () {    $(#top-page:not(.push)).removeClass(nudge-right);    $(#top-page:not(.push)).addClass(push);});$(#top-page).hover(function () {    if ($(this).hasClass(push)) {        $(this).toggleClass(nudge-left);    }});$(#top-page).click(function () {    if ($(this).hasClass(push)) {        $(this).removeClass(push nudge-left);    }});
A simple drawer using CSS3 and jQuery
javascript;jquery