title: How to expand and collapse three div's side by side?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
      $("#toggle").click(function () {
          if ($(this).data('name') == 'show') {
              $("#sidebar").animate({
                  width: '10%'
              }).hide()
              $("#map").animate({
                  width: '89%'
              });
              $(this).data('name', 'hide')
          } else {
              $("#sidebar").animate({
                  width: '29%'
              }).show()
              $("#map").animate({
                  width: '70%'
              });
              $(this).data('name', 'show')
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      width:100%;
      height: 100%;
  }
  #header {
      width: 100%;
      height: 20%;
      float: left;
      border: 1px solid;
  }
  #map {
      width: 80%;
      height: 80%;
      float: left;
      border: 1px solid;
  }
  #sidebar {
      width: 19%;
      height: 80%;
      float: left;
      border: 1px solid;
  }
  #toggle {
      width: 10%;
      height: 40%;
      margin-right: 6.5%;
      margin-top: 3.5%;
      float: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="header"&gt;HEADER
      &lt;input type="button" data-name="show" value="Toggle" id="toggle"&gt;
  &lt;/div&gt;
  &lt;div id="map"&gt;MAP&lt;/div&gt;
  &lt;div id="sidebar"&gt;SIDEBAR&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am a beginner in <code>angularjs</code>, <code>jquery</code> and <code>css</code>. I want to create three div with toggle side by side 
  Please help me how to do that in angularjs.</p>
  
  <p>In normal mode Example:-</p>
  
  <p><a href="https://i.stack.imgur.com/Ma3HG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ma3HG.jpg" alt="enter image description here"></a></p>
  
  <p>It will be like this.</p>
  
  <p>If I expand center div it needs to be like this Example:-</p>
  
  <p><a href="https://i.stack.imgur.com/ej7V7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ej7V7.jpg" alt="enter image description here"></a></p>
  
  <p>If I expand last div it needs to be like this Example:-</p>
  
  <p><a href="https://i.stack.imgur.com/QbW8S.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QbW8S.jpg" alt="enter image description here"></a></p>
  
  <p>Thanks..</p>