gouf
6/21/2015 - 3:52 AM

index.html

style.css
content_copyfile_download
#wrapepr {
  width: 100%;
  height: auto;
  margin: 0;
  background: #f7f7f7;
}

#target {
  width: 20px;
  height: 300px;
  border: thin solid #989898;
  background: #dfdfdf;
  cursor: pointer;
  overflow: hidden;
  transition-duration: 1s;
}

.width {
  width: 300px !important;
  transition-duration: 2s;
}
script.js
content_copyfile_download
$(function () {
  $('#target').on('click', function (e) {
    $(this).toggleClass('width');
  });
});
index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <div id="wrapper">
    <div id="target">
      <ul>
        <li>Top</li>
        <li>Settings</li>
        <li>Logout</li>
      </ul>
    </div>
  </div>
</body>
</html>