title: JavaScript Maximize onclick
body: <p>I want to make a website which looks like a cmd. It's basically done but I think it would looks so much better if I add one more feature. I want to make that, when you click onto the maximize button the cmd should be maximized. It's all done except the thing, when you click again the maximize button it won't get the default size back.
  Any idea how to fix it?</p>
  <p><a href="https://i.stack.imgur.com/lxNef.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lxNef.gif" alt="demonstrate the problem" /></a></p>
  <p>Code: (I tried to make it in if-else and a do-while statement but not really worked.)</p>
  <pre><code>function maxiMize() {
      
      var maximize = document.getElementById(&quot;maximize&quot;);
      var term_head = document.getElementById(&quot;term_head&quot;);
      var terminal_main = document.getElementById(&quot;terminal_main&quot;);
      var main_header = document.getElementById(&quot;main_header&quot;);
      var x = 0;
  
      if (maximize.style.height = &quot;800px&quot;) {
          terminal_main.style.width = &quot;auto&quot;;
          terminal_main.style.height = &quot;100%&quot;;
          terminal_main.style.margin = &quot;0&quot;;
          term_head.style.width = &quot;auto&quot;;
          term_head.style.margin = &quot;0&quot;;
          document.getElementById('term_head').style.borderRadius = &quot;0&quot;;
          document.getElementById('term_head').style.MozBorderRadius = &quot;0&quot;;
          main_header.style.position = &quot;relative&quot;;
          main_header.style.width = &quot;99.999%&quot;;
          document.body.style.background = &quot;#000&quot;;
          x = 1;
      } else if (maximize.style.height != &quot;800px&quot;) {
          terminal_main.style.width = &quot;auto&quot;;
          terminal_main.style.margin = &quot;0 15%&quot;;
          terminal_main.style.height = &quot;800px&quot;;
          term_head.style.width = &quot;auto&quot;;
          term_head.style.margin = &quot;0&quot;;
          document.getElementById('term_head').style.borderRadius = &quot;15px&quot;;
          document.getElementById('term_head').style.MozBorderRadius = &quot;15px&quot;;
          main_header.style.position = &quot;fixed&quot;;
          main_header.style.width = &quot;100%&quot;;
          document.body.style.background = &quot;#333&quot;;
          x = 0;
      }/*
      do {
          terminal_main.style.width = &quot;auto&quot;;
          terminal_main.style.height = &quot;100%&quot;;
          terminal_main.style.margin = &quot;0&quot;;
          term_head.style.width = &quot;auto&quot;;
          term_head.style.margin = &quot;0&quot;;
          document.getElementById('term_head').style.borderRadius = &quot;0&quot;;
          document.getElementById('term_head').style.MozBorderRadius = &quot;0&quot;;
          main_header.style.position = &quot;relative&quot;;
          main_header.style.width = &quot;99.999%&quot;;
          document.body.style.background = &quot;#000&quot;;
          x = 1;
      }while(x !=1); */
  
  }
  </code></pre>
  <ol>
  <li>List item</li>
  </ol>