Having a bit of trouble trying to display one div with a slideshow and hide another containing a list of images on larger screens, like desktops. I want to do the opposite on smaller screens. Both Div's have repeater controls, but I don't think that should cause any issues. Any suggestions on why it's not working would be greatly appreciated.
Here's my jQuery code and the CSS classes I'm trying to use;
$(function () {
$(window).resize(function () { ToggleSlideshow(); });
ToggleSlideshow();
});
function ToggleSlideshow() {
// Apply your condition here to toggle the visibility of the slide show
if ($(window).width() < 500) {
$("#slideShowContainer").addClass(".hiding");
$("#imgList").addClass(".showing");
} else {
$("#slideShowContainer").addClass(".showing");
$("#imgList").addClass(".hiding");
}
}
.showing{
display:block;
}
.hiding{
display:none;
}
When I say it's not working, I mean both are being displayed which is not what I am aiming for. You can see it live by following this link.