Question

What’s wrong with this code am I missing something? 🙁 I think the problem is at if and else..

$(function () {
    if ($("a#toggle_sidebar").length > 0) {
        $('#toggle_sidebar').click(function () {
            $('#dw_right').show();
            $('#content-container div#container').css('width', '83%');
        });
    } else {
        $('#toggle_sidebar').click(function () {
            $('#dw_right').hide();
            $('#content-container div#container').css('width', '100%');
        });
    }
});

Answer 1

The issue is that the click event for showing or hiding would only be handled once, but not reversed. If you add an if/else in the click handler you can then easily toggle the element. The document ready will only be run once.

$(function () {
    if ($("a#toggle_sidebar").length > 0) {
        $('#toggle_sidebar').click(function () {
            if(!$(this).is(':visible'))
            {
                $('#dw_right').show();
                $('#content-container div#container').css('width', '83%');
            }
            else
            {  
                $('#dw_right').hide();
                $('#content-container div#container').css('width', '100%');
            }
        });
    }
});