Jquery hide() / show() on window width

Question

Hi guys please advise if this is the correct way of running the code on certain window width.

$(window).resize(function(){
var width = $(window).width();
if(width <= 780){
 jQuery(".answers").hide();
 jQuery(".container h4").click(function(){
 jQuery(this).next(".answers").siblings(".answers:visible").slideToggle();
 jQuery(this).next(".answers").slideToggle();
 });
}
else{
 jQuery(".answers").show();
}
})

on width bigger than 700px if I click on the question.. the whole thing keeps wobbling. Please advise --- the Jsfiddle link https://jsfiddle.net/bw6k874b/28/

• l.varga: Do you need to do it via JS? Why not do it via CSS? Way better performance-wise. Wobbling is caused by elements being initially hidden and each time the window is resized, if the width is bigger than 780px, they will get shown.
• Mazz: Here is some help, without the wobbling: jsfiddle.net/e4g4a4m2
• The Naga Tanker: I'm doing through Js because I want the answer div if the user clicks on some other div.
• The Naga Tanker: thanks @Mazz .. That was exactly what I wanted
• Mazz: Nice, i added it as answer

Answer 1

You just have to check with jQuery(".answers").is(':hidden') if .answers is already hidden.

$(window).resize(function() {
var width = $(window).width();
if (width <= 780) {
 if (jQuery(".answers").is(':hidden')) return; // This is the fix
 jQuery(".answers").hide();
 jQuery(".container h4").click(function() {
 jQuery(this).next(".answers").siblings(".answers:visible").slideToggle();
 jQuery(this).next(".answers").slideToggle();
 });
} else {
 jQuery(".answers").show();
}
})

Here is yours without the wobbling: https://jsfiddle.net/e4g4a4m2