Creating a slider to adjust the width and two click events

Question

I have some JavaScript that was put together for functionality but I wanted to know if there was a better way to write it. As it stands it's a little hard to read and follow.

$(document).ready(function(){
var loop = null;
$("li").click(function(){
 $("li").css("box-shadow", "none");
 $(".selector").css("visibility","hidden");
 var offSet = 7;
 if($(this).hasClass('Selected')){
 $(this).removeClass('Selected');
 $(this).children("div").css("visibility","hidden");
 $(this).css("box-shadow", "none");
 } else{
 $("li").removeClass('Selected');
 $(this).addClass('Selected');
 $(this).children("div").css("visibility","visible");
 $(this).css("box-shadow", "inset 0 0 " + offSet + "px #333");
 }
});
$("#sideNav > ul > li").click(function(){
 var element = $("#content");
 var offsetElement = $("#subSideNav");
 var width = 0;
 var offSet = parseInt(offsetElement.css("width")) + 2;
 if($(this).attr('id') === "Selected" && !element.hasClass('large')){ 
 $(this).attr('id', '');
 width = parseInt(element.css("width")) + 2;
 slider(element, offSet, 'hidden');
 $(element).addClass('large');
 } else if($(this).attr('id') !== 'Selected' && element.hasClass('large')){
 $("#subSideNav").css('display', 'block');
 $(this).attr('id', 'Selected');
 width = parseInt(element.css("width")) - 2;
 slider(element, offSet, 'visible');
 $(element).removeClass('large');
 }else if($(this).attr('id') !== 'Selected' && !element.hasClass('large')){
 $("#sideNav > ul > li").attr('id', '');
 $(this).attr('id', 'Selected');
 }
});
function slider(element, offSet, visibility){
 var width = parseInt(element.css("width"));
 if('visible' === visibility){
 width -= 1;
 } else{
 width += 1;
 }
 offSet -= 1;
 if(0 < offSet){
 element.css("width", width + "px");
 loop = setTimeout(function(){slider(element, offSet, visibility)}, 5);
 } else{
 clearTimeout(loop);
 }
}
})

The functions are basically supposed to create a slider to adjust the width and two click events. One event make a cover selector div visible to let you know it has been clicked, and the other does the same plus triggering the slider function. The reason there are two different clicks is because there are two separate menus, and only one needs the slider function.

Answer 1

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 > ul > li").click(function(){
 var element = $("#content");
 var offsetElement = $("#subSideNav");
 var offSet = parseInt(offsetElement.css("width")) + 2;
 if($(this).attr('id') === "Selected" && !element.hasClass('large')){ 
 $(this).attr('id', '');
 slider(element, offSet, 'hidden');
 element.addClass('large');
 } else if($(this).attr('id') !== 'Selected' && element.hasClass('large')){
 offsetElement.css('display', 'block');
 $(this).attr('id', 'Selected');
 slider(element, offSet, 'visible');
 element.removeClass('large');
 } else if($(this).attr('id') !== 'Selected' && !element.hasClass('large')){
 $(this).attr('id', 'Selected').siblings().attr('id', '');
 }
});