position: absolute;
top: 0;
bottom: 0;
- left: 0;
+ left: -200px;
width: 200px;
-moz-transition-property: left;
-moz-transition-duration: 200ms;
-webkit-transition-duration: 200ms;
-webkit-transition-timing-function: ease;
}
-#sidebarContainer.hidden {
- left: -200px;
+#outerContainer.sideBarOpen > #sidebarContainer {
+ left: 0px;
}
#mainContainer {
-webkit-transition-duration: 200ms;
-webkit-transition-timing-function: ease;
}
-#mainContainer.sideBarOpen {
+#outerContainer.sideBarOpen > #mainContainer {
left: 200px;
}
<body>
<div id="outerContainer">
- <div id="sidebarContainer" class="hidden">
+ <div id="sidebarContainer">
<div id="toolbarSidebar">
<div class="splitToolbarButton toggled">
<button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" onclick="PDFView.switchSidebarView('thumbs')"></button>
document.getElementById('sidebarToggle').addEventListener('click',
function() {
this.classList.toggle('toggled');
- document.getElementById('sidebarContainer').classList.toggle('hidden');
- mainContainer.classList.toggle('sideBarOpen');
+ console.log('toggling');
+ document.getElementById('outerContainer').classList.toggle('sidebarOpen');
updateThumbViewArea();
});