Swap DIV's using jQuery?

Posted on 2013-01-03
Medium Priority
Last Modified: 2013-01-03
Hi all and happy new year!

I am trying to change the behaviour of an element on my page when the screen is resized.

I have a left navigation menu that is open at max screen width of say 1200px but when the window is resized below 1200px I would like the left navigation to be closed and only open when hovered (like Amazons menu).

I have both elements setup and ready to go. For the normal navigation I have  a css class of ".dropdown open" and for the closed hover menu I have a css class of ".dropdown"

Is there a way to use jQuery to swap the classes when the window is resized?

I'd appreciate some advice on how to do this please....
Question by:rafique12
  • 2
LVL 25

Accepted Solution

Kyle Hamilton earned 2000 total points
ID: 38740174
$(window).resize( function () {

var w = $(window).width();

if (w < 1200) {

Open in new window


Author Closing Comment

ID: 38740389
Thankyou so much. Works perfect!!!
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38740447

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question