어떻게이 CSS 스타일과 jquery를 Clinic div와 협력 할 수 있습니까?

Question

어떻게이 CSS 스타일과 jquery를 Doctor div와 (과) 같이 Clinic div에서 사용할 수 있습니까? Doctor div처럼 Clinic div를 할 때 Clinic div가 중단되었지만 Doctor div가 정상적으로 작동합니다 그래서이 CSS 스타일과 jquery를 Doctor div처럼 Clinic div와 함께 사용할 수 있습니까?

HTML 코드 :

<div id="wrap" class="sidebar" > 
    <div id="sidebar" style="height: 150px;"> 
     <span id="toggleBtn">Doctor</span> 
    </div> 
</div> 
<div id="cwrap" class="csidebar" > 
    <div id="csidebar" style="height: 150px;"> 
     <span id="ctoggleBtn">Clinic</span> 
    </div> 
</div> 

CSS 코드 :

#wrap { 
    border: solid 1px #ccc; 
    width: 1355px; 
    margin: 0 auto; 
    overflow: hidden; 
    margin-bottom: 20px; 
} 
#sidebar { 
    width: 220px; 
    position: fixed; 
    top: 1em; 
    right: 1em; 
    border-radius: 5px 5px 5px 5px; 
} 

#wrap.sidebar #sidebar { 
    right: -254px; 
} 

#wrap.sidebar #mainContent, #wrap.sidebar #sidebar { 
    margin: 10px; 
    padding: 10px; 
    box-shadow: 0px 0px 4px #888; 
} 

.nosidebar #mainContent, #wrap #sidebar { 
    margin: 10px; 
    padding: 10px; 
    box-shadow: 0px 0px 4px #888; 
} 

#wrap.nosidebar #sidebar { 
    right: 0; 
} 

#sidebar #toggleBtn { 
    width: 60px; 
    height: 30px; 
    line-height: 30px; 
    background: #2191c0; 
    color: white; 
    cursor: pointer; 
    position: absolute; 
    top: 10px; 
    left: -60px; 
    text-align: center; 
    border-radius: 5px 0 0 5px; 
} 

#sidebar #toggleBtn:hover { 
    background: #6eac2c; 
} 

#cwrap { 
    border: solid 1px #ccc; 
    width: 1355px; 
    margin: 0 auto; 
    overflow: hidden; 
    margin-bottom: 20px; 
} 
#csidebar { 
    width: 220px; 
    position: fixed; 
    top: 1em; 
    right: 1em; 
    border-radius: 5px 5px 5px 5px; 
} 

#cwrap.csidebar #csidebar { 
    right: -254px; 
} 

#cwrap.csidebar #cmainContent, #cwrap.csidebar #csidebar { 
    margin: 10px; 
    padding: 10px; 
    box-shadow: 0px 0px 4px #888; 
} 

.cnosidebar #cmainContent, #cwrap #csidebar { 
    margin: 10px; 
    padding: 10px; 
    box-shadow: 0px 0px 4px #888; 
} 

#cwrap.cnosidebar #csidebar { 
    right: 0; 
} 

#csidebar #ctoggleBtn { 
    width: 60px; 
    height: 30px; 
    line-height: 30px; 
    background: #2191c0; 
    color: white; 
    cursor: pointer; 
    position: absolute; 
    top: 50px; 
    left: -60px; 
    text-align: center; 
    border-radius: 5px 0 0 5px; 
} 

#csidebar #ctoggleBtn:hover { 
    background: #6eac2c; 
} 

JQuery와 코드 :

$(document).ready(function() { 
    // Variables 
    var objMain = $('#wrap'); 
    var objSidebar = $('#nosidebar'); 
    var objContent = $('#mainContent'); 

    // Show sidebar 
    function showSidebar() { 
     objMain.removeClass('nosidebar'); 
     objMain.addClass('sidebar'); 
     objSidebar.animate({ 'right' : '-254px'},'slow'); 
     objContent.animate({ 'margin-right': 270}, 'slow'); 
     $.cookie('sidebar-pref2', 'use-sidebar', { expires: 30 }); 
    } 

    // Hide sidebar 
    function hideSidebar() { 
     objMain.removeClass('sidebar'); 
     objMain.addClass('nosidebar'); 
     objSidebar.animate({ 'right' : '0'},'slow'); 
     objContent.animate({ 'margin-right': 0}, 'slow'); 
     $.cookie('sidebar-pref2', null, { expires: 30 }); 
    } 

    // Sidebar separator 
    var objSeparator = $('#toggleBtn'); 

    objSeparator.click(function(e) { 
     e.preventDefault(); 
     if (objMain.hasClass('nosidebar')){ 
      showSidebar(); 
     } 
     else { 
      hideSidebar(); 
     } 
    }); 

    // Load preference 
    if ($.cookie('sidebar-pref2') == null){ 
     objMain.removeClass('sidebar'); 
    } 
}); 

Answer 1

이 JSFiddle을 시도하고이 같은 것인지 알 ... ..

http://jsfiddle.net/wWtnC/4/