jQuery Toggle function

Question

Hi I have this code:

$(document).ready(function () {
        $(".LeftColumn").hide();
        $(".SidebarToggle").toggle(function () {
            $(this).addClass("active");
            $(this).text("Hide Sidebar");
            $(this).attr("title", "Hide Sidebar");
            $(".LeftColumn").fadeIn("fast");
            return false;
        },
        function () {
            $(this).removeClass("active");
            $(this).text("Show Sidebar");
            $(this).attr("title", "Show Sidebar");
            $(".LeftColumn").fadeOut("fast");
            return false;
        });

        $(document).mouseup(function () {
            $('.LeftColumn').fadeOut('fast');
            $('.SidebarToggle').removeClass("active");
            $('.SidebarToggle').text("Show Sidebar");
        })
    });

The problem I have is when the user clicks elsewhere on the page it will hide the LeftColumn as I want, but the Toggle function doesn't know this so when the user clicks the SidebarToggle link it wont show the LeftColumn as it treats it as hiding. How can I fix this?

Thanks

Answer 1

$(document).ready(function() {
    var leftColumn = $('.LeftColumn');
    leftColumn.hide();
    var sidebarToggle = $('.SidebarToggle')
    var hideSidebar = function() {
        sidebarToggle.removeClass('active');
        sidebarToggle.text('Show Sidebar');
        sidebarToggle.attr('title', 'Show Sidebar');
        leftColumn.fadeOut('fast');
    };
    var showSidebar = function() {
        sidebarToggle.addClass('active');
        sidebarToggle.text('Hide Sidebar');
        sidebarToggle.attr('title', 'Hide Sidebar');
        leftColumn.fadeIn('fast');
    };
    sidebarToggle.click(function() {
        if (sidebarToggle.hasClass('active')) {
            hideSidebar();
        }
        else {
            showSidebar();
        }
        return false;
    });
    $(document).click(function () {
        if (sidebarToggle.hasClass('active')) {
            hideSidebar();
        }
    });
});

Answer 2

In this case, instead of .toggle(), use .click() and detect the state inside by checking for that active class with .hasClass(), like this:

$(function () {
  $(".LeftColumn").hide().click(function(e) { e.stopPropagation(); }); 
  $(".SidebarToggle").click(function () {
    if($(this).hasClass("active")) {
      $(this).removeClass("active")
             .text("Show Sidebar")
             .attr("title", "Show Sidebar");
      $(".LeftColumn").fadeOut("fast");      
    } else {
      $(this).addClass("active")
             .text("Hide Sidebar")
             .attr("title", "Hide Sidebar");
      $(".LeftColumn").fadeIn("fast");
    }
    return false;
  });
  $(document).click(function () {
      $('.LeftColumn').fadeOut('fast');
      $('.SidebarToggle').removeClass("active")
                         .text("Show Sidebar");
  });
});

You can try a demo here

This way, you don't need to worry about the state of the .toggle() functions, you're checking as you click :)

Answer 3

give this a shot

$(document).mouseup(function (e) {
    if (! $(e.target).is('.SidebarToggle')) {
        $('.LeftColumn').fadeOut('fast');
        $('.SidebarToggle').removeClass("active");
        $('.SidebarToggle').text("Show Sidebar");
    }
})