Edit in JSFiddle

.SlidePanel {
  overflow: hidden;
  width: 0;
  transition: .5s width;
  box-shadow: inset 2px 0 3px silver;
}
.SlidePanel--open {
  width: 150px;
}

.SlidePanel__content {
  width: 150px;
  box-shadow: inset 0 0 5px silver;
  float: right;
}

<div id="slidePanel" class="SlidePanel">
  <div class="SlidePanel__content">
    <ul>
      <li>Item 01</li>
      <li>Item 02</li>
      <li>Item 03</li>
      <li>Item 04</li>
      <li>Item 05</li>
      <li>Item 06</li>
      <li>Item 07</li>
      <li>Item 08</li>
      <li>Item 09</li>
      <li>Item 10</li>
    </ul>
  </div>
</div>

<button id="slideButton">Slide</button>

document.getElementById('slideButton').addEventListener('click', function () {
	var slidePanel = document.getElementById('slidePanel');
  
  if (slidePanel.className.indexOf('SlidePanel--open') > -1) {
  	slidePanel.className = 'SlidePanel';
  } else {
  	slidePanel.className = 'SlidePanel SlidePanel--open';
  }
});