Skip to main content
edited tags
Link
Jamal
  • 35.2k
  • 13
  • 134
  • 238
edited tags
Link
Jamal
  • 35.2k
  • 13
  • 134
  • 238
deleted 78 characters in body; edited tags; edited title
Source Link
Jamal
  • 35.2k
  • 13
  • 134
  • 238

jQuery: How to optimize this code Hide/show sidebar

I am using this code for my responsive layout mobile sidebar hide show/show. I am not an expert in jqueryjQuery and just wonder if I can optimize this code with the same functionalitfunctionality.

$(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:

  1. .qa-sidepanel is a main sidebar div
  2. #sidepanelpull is a handler when user click it will slide open the .qa-sidepanel and also fadeToggle #sidepanelclose handler ( which is located at the top )
  3. #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.

I hope it would be enough if not please let me know I will try to explain more details.

jQuery: How to optimize this code

I am using this code for my responsive layout mobile sidebar hide show. I am not expert in jquery and just wonder if I can optimize this code with same functionalit

$(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 code:

  1. .qa-sidepanel is a main sidebar div
  2. #sidepanelpull is a handler when user click it will slide open the .qa-sidepanel and also fadeToggle #sidepanelclose handler ( which is located at the top )
  3. #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.

I hope it would be enough if not please let me know I will try to explain more details.

Hide/show sidebar

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:

  1. .qa-sidepanel is a main sidebar div
  2. #sidepanelpull is a handler when user click it will slide open the .qa-sidepanel and also fadeToggle #sidepanelclose handler ( which is located at the top )
  3. #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.
Source Link
pixelngrain
  • 285
  • 2
  • 17
Loading