2
\$\begingroup\$

I have a page with multiple menus. Once I hit a certain window width, I use CSS and jQuery to turn them into accordions. I also check the screen size when resizing so the accordions don't stay hidden if the user resizes the window. Since I have two window widths I need to adjust for, I am using two click events to open and close the accordions and two to check the window width.

I could really use some help to clean up this code and combine if possible.

$('footer').find('.col-md-2 .accordion-toggle').click(function () {
    var width = $(window).width();
    if (width <= 991) {
        $(this).next('div').slideToggle('medium');
    }
});

$('footer').find('.details-wrapper .accordion-toggle').click(function () {
    var width = $(window).width();
    if (width <= 475) {
        $(this).next('div').slideToggle('medium');
    }
});            

$(window).resize(function () {
    checkWidth();
}); 

function checkWidth(){
    $width = $(window).width();
    var locationToggle = $(".details-wrapper .accordion-toggle").next('div');
    if($width > 475){
        $(locationToggle).show();
    } else {
        $(locationToggle).hide();
    }

    var accordionToggle = $(".col-md-2 .accordion-toggle").next('div');
    if($width > 991){
        $(accordionToggle).show();
    } else {
        $(accordionToggle).hide();
    }            
}

```
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.