title: Closing tabs on click
body: <p>I am trying to made a tab function on my website and I would like to have that tabs responsive. So I made code like this:</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>function openCity(evt, cityName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i &lt; tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i &lt; tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
      }
      document.getElementById(cityName).style.display = "block";
      evt.currentTarget.className += " active";
  }
  
  // Get the element with id="defaultOpen" and click on it
  document.getElementById("defaultOpen").click();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Style the tab */
  .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
  }
  
  /* Style the buttons inside the tab */
  .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
      background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
      background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
      display: none;
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
  }
  
  /* Style the close button */
  .topright {
      float: right;
      cursor: pointer;
      font-size: 28px;
  }
  
  .topright:hover {color: red;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tab"&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen"&gt;London&lt;/button&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'Paris')"&gt;Paris&lt;/button&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'Tokyo')"&gt;Tokyo&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id="London" class="tabcontent"&gt;
    &lt;span onclick="this.parentElement.style.display='none'" class="topright"&gt;&amp;times&lt;/span&gt;
    &lt;h3&gt;London&lt;/h3&gt;
    &lt;p&gt;London is the capital city of England.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="Paris" class="tabcontent"&gt;
    &lt;span onclick="this.parentElement.style.display='none'" class="topright"&gt;&amp;times&lt;/span&gt;
    &lt;h3&gt;Paris&lt;/h3&gt;
    &lt;p&gt;Paris is the capital of France.&lt;/p&gt; 
  &lt;/div&gt;
  
  &lt;div id="Tokyo" class="tabcontent"&gt;
    &lt;span onclick="this.parentElement.style.display='none'" class="topright"&gt;&amp;times&lt;/span&gt;
    &lt;h3&gt;Tokyo&lt;/h3&gt;
    &lt;p&gt;Tokyo is the capital of Japan.&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I am stacked with two things, </p>
  
  <ul>
  <li><p>first is that I would like tabs to close on click on title (London,
  Paris, Tokyo), and then to remove active class from that title when
  it is clicked.</p></li>
  <li><p>And second, I would like to have this responsive with two tabs in
  row, third one is going in second row, and then on click to open right
  below tab that is clicked, and to push the third one down.</p></li>
  </ul>
  
  <p>Any hint will help, thanks in advance</p>