Problem with function within $(window).resize - us

Question

I want to use a simple function to hide/show content only on mobile devices.
The function itself is pretty straightforward. I use this code here for that:

    $('.toggleMobile').click(function() {
        var hideableContent = $(this).parent().find('.hideable');
        hideableContent.slideToggle('medium');
    });

So... nothing fancy, i know.

It gets more complicated as i try to detect the browser viewport.
I think I took care of that by using the following lines (you probably will find ways to improve it):

    function whatMedia() {

        var viewport = $(window).width();
        var mediaType;

        if ( viewport < 767 )
            mediaType = 'mobile';
        else if ( (viewport >= 767) && (viewport < 991) )
            mediaType = 'tablet';
        else
            mediaType = 'desktop';

        return mediaType;
   }

Now i just need a function that gets triggered only when the viewport is mobile (maybe the problem is here?):

   function toggleMobile(mediaType) {

        if ( mediaType === 'mobile' ) {
            $('.toggleMobile').click(function() {
                var hideableContent = $(this).parent().find('.hideable');
                hideableContent.slideToggle('medium');
            });
        }
    }

I have no problem checking for the viewport the first time the page is loaded. I just use this (very simple bit of code):

    // Check media type and activate accordingly
    var mT = whatMedia();
    toggleMobile(mT);

So far so good. Now comes the fun part:
I want to be able to detect if a user resizes the browser window and activate/deactive the toggleMobile() function accordingly..

I could do this:

    $(window).resize(function() {
        var mT = whatMedia();
        toggleMobile(mT);
    }

As you perhaps already know, this $(window).resize thing makes Webkit and other browsers go a bit crazy, and repeat the function as long as the user resizes the window.
This is good or bad depending on your take on it.
I personally don't want this to happen, so i use this function i found on the forums:

    var waitForFinalEvent = (function () {

        var timers = {};

        return function (callback, ms, uniqueId) {
            if (!uniqueId) {
                uniqueId = "Don't call this twice without a uniqueId";
        }
            if (timers[uniqueId]) {
                clearTimeout (timers[uniqueId]);
            }
            timers[uniqueId] = setTimeout(callback, ms);
        }

   })();

My resize event looks like this:

    $(window).resize(function() {
        waitForFinalEvent(function() {
            var mT = whatMedia();
            toggleMobile(mT);
        }, 500, '1');         
    }

This certainly does delay the calculation of the browser window on resize but i can't make the function inside it work.
I don't know what the problem is :(
Th function gets triggered two or more times, and even when the viewport is recognized as desktopor tablet.

Answer 1

In the togglemobile function, you just register the click event but nothing else, if you want to trigger it you could do

   $('.toggleMobile').click(function() {
        var hideableContent = $(this).parent().find('.hideable');
        hideableContent.slideToggle('medium');
   }).trigger('click');

this would trigger the click event and run the code, alternatively you could hide the element immediately instead.

EDIT: I'll revise my answer a bit. First we register the click event for the element that while slideToggle the content:

   $('.toggleMobile').click(function() {
        if(whatMedia() === "mobile") {
           var hideableContent = $(this).parent().find('.hideable');
           hideableContent.slideToggle('medium');
        }
   });

then in the toggleMobile(mt); function we now hide the content if the size goes over to mobile media

function toggleMobile(mediaType) {

    if ( mediaType === 'mobile' ) {
        var hideableContent = $(".toggleMobile").parent().find('.hideable');
        hideableContent.slideToggle('medium');
    }
}

this is if i understand, what you want?

I see that this is probably what @sje397 meant.