Closing tabs on click

Question

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:

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < 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();

/* 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;}

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

Now I am stacked with two things,

• 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.

• 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.

Any hint will help, thanks in advance

Answer 1

For you issue no. 1, you can just change from "openCity" to "toggleCity", by checking if the current city is shown -> then you hide, otherwise you show it.

function toggleCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
   
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    var prev_state_display = document.getElementById(cityName).style.display;
    
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    
    if( prev_state_display === "none"){
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    } else {
        document.getElementById(cityName).style.display = "none";
        evt.currentTarget.className.replace(" active", "");
    }
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

/* 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;}

<div class="tab">
  <button class="tablinks" onclick="toggleCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="toggleCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="toggleCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <span onclick="toggleCity(event, 'London')" class="topright">&times</span>
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <span onclick="toggleCity(event, 'Paris')" class="topright">&times</span>
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <span onclick="toggleCity(event, 'Tokyo')" class="topright">&times</span>
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

For what concern your issue no. 2, here you can see a sample written in "bad code" just to put you on the right track. If you resize the iframe container width, it will behave like you asked..

It needs a good review though. LINK

The code is splitted in two parts, but shown as a single with the help of floats.. Check @media at bottom of CSS code.

PS I used some jquery code since I was getting some error for the toggleCity function not being defined..

The jQuery way

Here is how you can do that with jQuery. Just add CSS style as follows

.tabcontent.active {display: block}

Also add HTML5 data attribute to .tablinks and here is the script

$('.tablinks').on('click', function(){
  let target_id = $(this).data('target');
  $('.tablinks, .tabcontent').removeClass('active');
  $(this).addClass('active');
  $(target_id).addClass('active');
});
$('.close-tab').on('click', function(){
  $('.tablinks, .tabcontent').removeClass('active');
});

$("#defaultOpen").click();

--> Working Fiddle