Question

I’m using .toggle() on a button element:

$("header button").click(function(event){
    $(".site-nav-wrapper").toggle();
    event.preventDefault();
});

This works great. The problem is if the button is toggled to display:none and then I change the device orientation, triggering my desktop media query, despite the fact I re-force display:block; on the desktop media query, the button remains toggled to display:none:

(Sass):

.site-nav-wrapper{

            //Mobile First
            display:none;

            @include breakpoint($breakpoint-lg) {
                display:block;
            }
}

Is there a way to reset whatever the toggle() function is storing?

Answer 1

toggle uses inline styling, which overrides whatever you’re doing in your stylesheet.

To get the desired result, you should use a special hidden class to hide the element, and use toggleClass instead.

SASS:

.site-nav-wrapper.hidden {

    display: none;

    @include breakpoint($breakpoint-lg) {
        display: block;
    }
}

JS:

$("header button").click(function(event){
    $(".site-nav-wrapper").toggleClass('hidden');
    event.preventDefault();
});