Question

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

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 🙂