Swich between functions

Swich between functions

Hello people,

I am trying to switch between two function based on the screen width, normal/wide screen and mobile. For  normal/widescreen I would like to have an overlay functionality and on mobile/tablet I would like to have an accordion function. I have tried a few scripts but I am not happy so far with the results.

Any ideas anybody?

This is my idea so far but it doesnt work:


// Screen width detection

var $window = $(window),
 $a = $('#map li a');
    if ($window.width() < 800) {
           $a.addClass('mobile');
           $a.parents("ul").attr("id", "accordion")
          //    $.function(accord);
                }else{
            $a.addClass('overlay');
        //    $.function(overlay);
        };
});

//Accordion function

 $(function accord(){
    var h2First = $("#accordion h2:first");
    var h2 = $("#accordion h2");
   
    $(h2First).addClass("active");
    $(h2First).next("section").css("display", "block");
   
        $(h2).each(function() {
            $(this).attr("title", $(this).text())
        });
   
        $(h2).click(function(e){
            $(this).toggleClass("active");
            $(this).next("section").slideToggle();
        e.preventDefault();
        });
});


// modal / overlay pop-up window

$(function overlay(){
            $('.overlay').on('click', function (popUp) {
                   $.fn.custombox( this, {
                    effect: 'fadein'
                });
            popUp.preventDefault();
            });
 

Thanks in advance!