Toggle class with jQuery and CSS clashing

Question

I've got a class, lets call it "responsive-table," where I have a media query to remove visibility when you reach a certain threshold on your resolution:

.responsive-table { display: block; }

@media screen and (max-width: 600px) {
  .responsive-table { display: none; }
}

When on a screen less than 600px, there is a button to toggle the visibility of this table that has a click action:

$(".responsive-table").toggle();

However once this is executed, and lets say you toggle the table on, then off, when the window is expanded to a higher resolution than 600px, .responsive-table seems to ignore the media queries of display: block; where it should become visible beyond this threshold of 600px viewport.

toggle() use inline style which is preponderant over style set for class — A. Wolff
– A. Wolff, Commented Feb 2, 2015 at 18:05
@SleekGeek OP is not wanted to toggle the class but toggle the visibility i.e. display none to block... — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Feb 2, 2015 at 18:05
There isn't any - I think the .toggle() just overpowers the CSS...or maybe toggle uses a different method than display: none...I suppose I could use .css and change it in this way. — Matt
– Matt, Commented Feb 2, 2015 at 18:05
@A.Wolff, that shouldn't matter though, even if it is style inline to display none, it should use display block when the window is expanded again. — Matt
– Matt, Commented Feb 2, 2015 at 18:07
@Matt Ya it matters. You could just toggle a class instead, e.g: jsfiddle.net/hfwgn50o/1 — A. Wolff
– A. Wolff, Commented Feb 2, 2015 at 18:17

vbms · Accepted Answer · 2015-02-02 18:15:31Z

1

do this with javascript $(window).resize(function() { if ($(".theTable").width() > 600) { $(".theTable").show(); $(".theToggleButton").hide(); } else { $(".theTable").hide(); $(".theToggleButton").show(); $(".theToggleButton").click(function(){ $(".theTable").toggle(); }); } });

answered Feb 2, 2015 at 18:15

vbms

612 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Matt Over a year ago

Yea I was hoping to avoid this - but it looks like it may be my only option.

Bhojendra Rauniyar Over a year ago

@Matt That's what I already updated in my answer. But I think you didn't understand?

vbms Over a year ago

there seems to be no way of doing this in pure css

Bhojendra Rauniyar · Accepted Answer · 2015-02-02 18:09:05Z

0

How about using like this?

.responsive-table { display: none; }

@media screen and (min-width: 600px) {/*notice: min-width is used*/
  .responsive-table { display: block !important; }
}

Update:

If you don't want to use !important then you can use jQuery like this (with your css code):

if($(window).width()<600){
   //use your code inside this
   $(".responsive-table").toggle();
}

edited Feb 2, 2015 at 18:09

answered Feb 2, 2015 at 18:02

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

4 Comments

Matt Over a year ago

I find it is bad practice to use !important in CSS...if you need to use it then something is wrong :)

Bhojendra Rauniyar Over a year ago

why is it bad practice if this works without any further javascript?

Matt Over a year ago

It's not solving the problem, it's a work around that can get messy later, you add one !important and eventually you have !importants all over the place overriding each other as a project grows.

Matt Over a year ago

You should be when working on larger projects...and of course it's true!

Collectives™ on Stack Overflow

Toggle class with jQuery and CSS clashing

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related