I have a button in my code that triggers CSS changes by adding and removing classes. The JavaScript for this function works as intended - clicking once adds the class, clicking again removes it, and so on.
However, I also implemented a feature to remove these classes if the browser window is resized. The problem arises when I resize the window and then try to click the button again. It seems to register the second click (even though the classes were removed due to resizing), essentially reversing the function. What I really need is for the button function to reset after resizing, starting from scratch as if it hadn't been clicked before.
I hope this explanation makes sense, as I've been struggling with this issue for a while now and haven't found a solution that works as desired.
Any assistance would be greatly appreciated!
Below is the code snippet:
JS/jQuery
{
/* Button Function to add and remove classes */
$("#nav-icon").click(function () {
var clicks = $(this).data("clicks");
if (!clicks) {
$(".logo-container").addClass("border-change-image");
$(".container-fluid").addClass("border-change-header");
} else {
$(".logo-container").removeClass("border-change-image");
$(".container-fluid").removeClass("border-change-header");
}
$(this).data("clicks", !clicks);
});
/* Window Resizing Function */
$(window).on("resize", function () {
var size = $(this).on("resize");
if (size) {
$(".logo-container").removeClass("border-change-image");
$(".container-fluid").removeClass("border-change-header");
}
});
}