Creating a slider to adjust the width and two click events
I was able to take out 5 lines worth after noticing that some lines weren't being used or used twice in the click events.

$("li").click(function(){
    $(".selector").css("visibility","hidden");
    var offSet = 7;
    if($(this).hasClass('Selected')){
        $(this).removeClass('Selected');
        $(this).css("box-shadow", "none");
        $(this).children("div").css("visibility","hidden");
    } else{
        $("li").css("box-shadow", "none");
        $(this).addClass('Selected').siblings().removeClass('Selected');
        $(this).css("box-shadow", "inset 0 0 " + offSet + "px #333");
        $(this).children("div").css("visibility","visible");
    }
});

$("#sideNav &gt; ul &gt; li").click(function(){
    var element = $("#content");
    var offsetElement = $("#subSideNav");
    var offSet = parseInt(offsetElement.css("width")) + 2;

    if($(this).attr('id') === "Selected" &amp;&amp; !element.hasClass('large')){            
        $(this).attr('id', '');
        slider(element, offSet, 'hidden');
        element.addClass('large');
    } else if($(this).attr('id') !== 'Selected' &amp;&amp; element.hasClass('large')){
        offsetElement.css('display', 'block');
        $(this).attr('id', 'Selected');
        slider(element, offSet, 'visible');
        element.removeClass('large');
    } else if($(this).attr('id') !== 'Selected' &amp;&amp; !element.hasClass('large')){
        $(this).attr('id', 'Selected').siblings().attr('id', '');
    }
});