Скрыть/переключить анимацию div не работает должным образом & закрыть, когда клик за пределами боковой панели

Question

Привет, У меня возникла проблема в анимации шоу и спрятаться в ширину div. Основная часть div должна принимать все 100% ширины, и когда боковая панель показывает, что она идет правильно. И когда боковая панель закрывает maincontent, она возвращается на 100% ширину. И как закрыть боковую панель, когда я нажимаю в div maincontent?

Вот скрипка. http://jsfiddle.net/8nhmU/

Script

$(document).ready(function() { 
    sidebarStatus = false; 
    $('.sidebar-toggle').click(function() { 
    if (sidebarStatus == false) { 
     $('.framecontentLeft').animate({ 
     marginLeft: "0px", 
     opacity: "1" 
     }, 'medium'); 
     $('#framecontentTop').animate({ 
     marginLeft: "150px", 
     opacity: "1" 
     }, 'medium'); 
     $('#maincontent').animate({ 
     marginLeft: "150px", 
     opacity: "1" 
     }, 'medium'); 
     sidebarStatus = true; 
    } 
    else { 
     $('.framecontentLeft').animate({ 
     marginLeft: "-150px", 
     opacity: "1" 
     }, 'medium'); 
     $('#framecontentTop').animate({ 
     marginLeft: "0px", 
     opacity: "1" 
     }, 'medium'); 
     $('#maincontent').animate({ 
     marginLeft: "0px", 
     opacity: "1" 
     }, 'medium'); 
     sidebarStatus = false; 
    } 
    }); 
}); 

CSS

body{ 
margin: 0; 
padding: 0; 
border: 0; 
overflow: hidden; 
height: 100%; 
max-height: 100%; 
} 

.framecontentLeft, #framecontentTop{ 
position: absolute; 
top: 0; 
left: 0; 
width: 150px; /*Width of left frame div*/ 
height: 100%; 
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
background-color: silver; 
color: #000; 
} 

#framecontentTop{ 
left: 150px; /*Set left value to WidthOfLeftFrameDiv*/ 
right: 0; 
width: auto; 
height: 120px; /*Height of top frame div*/ 
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
background: green; 
color: white; 
} 

#maincontent{ 
position: fixed; 
left: 150px; /*Set left value to WidthOfLeftFrameDiv*/ 
top: 120px; /*Set top value to HeightOfTopFrameDiv*/ 
right: 0; 
bottom: 0; 
overflow: auto; 

    background: radial-gradient(ellipse at center center , rgb(255, 255, 255) 0%, rgb(246, 246, 246) 47%, rgb(237, 237, 237) 100%) repeat scroll 0% 0% transparent; 
    border-color: rgb(154, 205, 50); 
    padding-top: 10px; 
    padding-bottom:10px; 
    z-index: 1; 
    border-width: 20px medium 20px; 
    border-style: solid none; 
    box-shadow: 1px 2px 4px 1px rgba(204, 204, 204, 0.2); 
} 

.innertube{ 
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/ 
} 

* html body{ /*IE6 hack*/ 
padding: 120px 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/ 
} 

* html #maincontent{ /*IE6 hack*/ 
height: 100%; 
width: 100%; 
} 

* html #framecontentTop{ /*IE6 hack*/ 
width: 100%; 
} 

.sidebar-toggle { 
    position: absolute; 
    top: 2px; 
    right: 2px; 
    width: 20px; 
    height: 20px; 
    background: black; 
} 

Любая помощь, пожалуйста.

Answer 1

использования ниже код, чтобы закрыть боковую панель, когда вы нажали MainContent

$(document).ready(function() { 
    sidebarStatus = false; 
    $('.sidebar-toggle').click(function() { 
    if (sidebarStatus == false) { 
     $('.framecontentLeft').animate({ 
     marginLeft: "-150px", 
     opacity: "1" 
     }, 'medium'); 
     $('#framecontentTop').animate({ 
     left: "0px", 
     opacity: "1" 
     }, 'medium'); 
     $('#maincontent').animate({ 
     left: "0px", 
     opacity: "1" 
     }, 'medium'); 
     sidebarStatus = true; 
    } 
    else { 
     $('.framecontentLeft').animate({ 
     marginLeft: "0px", 
     opacity: "1" 
     }, 'medium'); 
     $('#framecontentTop').animate({ 
     left: "150px", 
     opacity: "1" 
     }, 'medium'); 
     $('#maincontent').animate({ 
     left: "150px", 
     opacity: "1" 
     }, 'medium'); 
     sidebarStatus = false; 
    } 
    }); 

    var iframeDoc = $('#iframe1').contents().get(0); 
    $(iframeDoc).bind('click', function(event) { 
    if(!sidebarStatus) 
     { 
        $('.sidebar-toggle').click(); 
     } 
    }); 
}); 

New Fiddle upd ated .... http://jsfiddle.net/8nhmU/9/

Answer 2

просто изменить свойства правильно:

http://jsfiddle.net/8nhmU/4/ Fiddle Обновлено

просто добавить , #maincontent на селекторе

$(document).ready(function() { 
    sidebarStatus = false; 
    $('.sidebar-toggle , #maincontent').click(function() { 
    if (sidebarStatus == false) { 
     $('.framecontentLeft').animate({ 
     marginLeft: "-150px", 
     opacity: "1" 
     }, 'medium'); 
     $('#framecontentTop').animate({ 
     left: "0px", 
     opacity: "1" 
     }, 'medium'); 
     $('#maincontent').animate({ 
     left: "0px", 
     opacity: "1" 
     }, 'medium'); 
     //sidebarStatus = true; if you want show-hide uncomment this 
    } 
    else { 
     $('.framecontentLeft').animate({ 
     marginLeft: "0px", 
     opacity: "1" 
     }, 'medium'); 
     $('#framecontentTop').animate({ 
     left: "150px", 
     opacity: "1" 
     }, 'medium'); 
     $('#maincontent').animate({ 
     left: "150px", 
     opacity: "1" 
     }, 'medium'); 
     sidebarStatus = false; 
    } 
    }); 
});