Slide Toggle After Page Resize Bugging - jQuery

Slide Toggle After Page Resize Bugging - jQuery

I have created a collapsible navigation which works fine on page load, but
on the resizing of the window it seems to get trippy and slides up and
down a number of times (can be just twice, or can go on for up to ten
times).
(function ($) {
$.fn.myfunction = function () {
$(".navi-btn").hide();
$(".navigation").show();
};
})(jQuery);
(function ($) {
$.fn.mysecondfunction = function () {
$(".navi-btn").show();
$(".navigation").hide();
$(".navi-btn").click(function () {
$(".navigation").slideToggle();
});
$("li").click(function () {
$(".navigation").slideToggle();
});
$("#width").text("too small");
};
})(jQuery);
$(document).ready(function () {
var width = $(window).width();
if (width > 400) {
$('#width').myfunction();
} else {
$('#width').mysecondfunction();
}
$(window).resize(function () {
var width = $(window).width();
if (width > 400) {
$('#width').myfunction();
} else {
$('#width').mysecondfunction();
}
});
});
Here is a "working" demo jsfiddle
I have written the script myself, so I am sure there is an easy fix, I
just don't seem to know what I have done.
I was thinking perhaps after a resize, would reloading the function be a
good workaround, and if so how can this effect be achieved?