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();
}
}
```