miotk miotk - 11 months ago 46
HTML Question

Removing a specific class when window is resized

I am trying to remove a class from a div when the web browser is resized.. For example on a mobile device.

The line which I am trying to affect is

<div class="tab-pane active" id="visitors">

I am trying to remove the
class. I have currently tried this:

$(window).on('load, resize', function mobileViewUpdate() {
var viewportWidth = $(window).width();
if (viewportWidth < 600) {

This doesn't seem to work though?

Answer Source

Remove the comma (,) between the event names - they should be separated with a space only.

Also note that there's no need to use addClass(''), your function name is redundant as it's an anonymous function, and you can use toggleClass() to simplify the logic and also make the class automatically be added/removed if the window is resized multiple times. Try this:

$(window).on('load resize', function() {
    $(".tab-pane").toggleClass("active", $(window).width() >= 600);

Working example

Resize the bottom right pane in the example above to see the code working.