Simple Sidebar that pushes content

index.html

<div id="sidebar" class="collapsed">
  
</div>
<div id="content">
  <button title="Toggle sidebar"></button>
  <h3>Some content</p>
</div>

script.js

const button = document.querySelector('button');

button.addEventListener('click', _ => {
  document.getElementById('sidebar').classList.toggle('collapsed');
})

simple-sidebar-that-pushes-content.markdown

Simple Sidebar that pushes content

A Pen by Serdar Balcı on CodePen.

License.

style.css

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#sidebar, #content {
  height: 100%;
  overflow:auto;
  float:left;
  transition: width .35s;
}

#sidebar {
  background:white;
  width: 30%;
  box-shadow: 2px 0 4px rgba(0,0,0,0.5);
}

#sidebar.collapsed {
  width: 0;
}

#sidebar.collapsed + #content {
  width: 100%;
}

#content {
  background:gray;
  width: 70%;
}

button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border:none;
  outline:none;
  background: black;
  margin: 20px;
  cursor:pointer;
}

h3 {
  font-family: sans-serif;
  color:white;
  text-align:center;
}