I am using this code for my responsive layout mobile sidebar hide/show. I am not an expert in jQuery and just wonder if I can optimize this code with the same functionality.
$(function() {
var a = $("#sidepanelpull");
var l = $("#sidepanelclose");
side = $(".qa-sidepanel");
sideHeight = side.height();
$(l).hide();
$(a).on("click", function(b) {
b.preventDefault();
side.slideToggle("fast");
l.fadeToggle("fast");
$(this).text($(this).text() == 'Hide Sidebar' ? 'Show Sidebar' : 'Hide Sidebar');
$(this).toggleClass('sidebar-state');
});
$(l).on("click", function(b) {
b.preventDefault();
side.slideToggle("fast");
$(this).fadeOut("fast");
$(a).text($(a).text() == 'Hide Sidebar' ? 'Show Sidebar' : 'Hide Sidebar');
$(a).toggleClass('sidebar-state');
});
$(window).resize(function() {
var b = $(window).width();
if (b > 320 && side.is(":hidden")) {
side.removeAttr("style")
}
})
});
Little details about the code:
.qa-sidepanel
is a main sidebar div#sidepanelpull
is a handler when user click it will slide open the.qa-sidepanel
and alsofadeToggle
#sidepanelclose
handler ( which is located at the top )#sidepanelclose
is a text link which will be visible at the top when sidebar is open so user on mobile can close from the top if it is too long.