title: Make element wider, then narrower when certain point is reached
body: <p>To the point: Right now every button click makes content-div 100px wider. The starting point is 300 pixels, and <strong>in 600 pixels, when user clicks the button the width should go back to 300 pixels</strong>. </p>
  
  <p>For clearance: I don't want the width to go straight to 600px and then back to 300px with the next click, the pattern should be like <em>click 1. +100px, click 2. +100px, click 3. +100px, click 4. -300px</em> .. Then start all over.</p>
  
  <p>I have tried to apply the else if -statement but for some reason div-element gets wider with every click but when it gets wider than 600 pixels, the else if -statement won't apply.</p>
  
  <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>var content = document.getElementById("content");
  var btn = document.getElementById("btn");
  content.style.width = "300px";
  btn.addEventListener("click", function() {
  if (content.style.width &gt;= "300px") {
  content.style.width = content.offsetWidth + 100 + "px"; }
  else if (content.style.width &gt;= "600px") {
  content.style.width = content.offsetWidth - 300 + "px"; } 
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#content {
  width: 300px;
  height: 100px;
  background: lightblue;
  display: flex;
  align-items: center; justify-content: center;
  transition: all 1s ease-in-out;
  }
  #btn {
  width: 100px; height: 50px;
  background: grey;
  display: flex;
  align-items: center; justify-content: center;
  color: white;
  text-decoration: none;
  }
  a {
  color: white;
  text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="content"&gt;
  &lt;/div&gt;
  &lt;div id="btn"&gt;&lt;a href="#"&gt;Click&lt;/a&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>