• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 320
  • Last Modified:

Swap DIV's using jQuery?

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....
0
rafique12
Asked:
rafique12
  • 2
1 Solution
 
Kyle HamiltonData ScientistCommented:
$(window).resize( function () {

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

if (w < 1200) {
   $(".dropdown").removeClass("open");
}else{
   $(".dropdown").addClass("open");
}
});

Open in new window

0
 
rafique12Author Commented:
Thankyou so much. Works perfect!!!
0
 
Kyle HamiltonData ScientistCommented:
:)
0
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

Featured Post

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now