CODEWITHSUNDEEP
jquery
Cameron
Cameron

Reputation: 28853

jQuery Toggle function

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

Upvotes: 0

Views: 321

Answers (3)

user57508
user57508

Reputation: 

$(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();
        }
    });
});

Upvotes: 1

Nick Craver
Nick Craver

Reputation: 630587

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 :)

Upvotes: 1

Reigel Gallarde
Reigel Gallarde

Reputation: 65274

give this a shot

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

Upvotes: 0

Related Questions