CODEWITHSUNDEEP
javascript
dulhac
dulhac

Reputation: 113

Close javascript tabs when clicked again

I have sections with tabs and need those tabs to close when the tab is clicked again.

I think this requires a toggle method but I'm not sure how to do that.

Here's the HTML:

<div class="tab">
 <button class="tablinks" id="tab1" onclick="openSubSvc(event, 'srv1-sub1')" >Sub-Service 1</button>
 <button class="tablinks" id="tab2" onclick="openSubSvc(event, 'srv1-sub2')">Sub-Service 2</button>
 <button class="tablinks" id="tab3" onclick="openSubSvc(event, 'srv1-sub3')">Sub-Service 3</button>
</div>

<div id="srv1-sub1" class="tab-content">
 <p>Text</p>
</div>

<div id="srv1-sub2" class="tab-content">
 <p>Text</p>
</div>

<div id="srv1-sub3" class="tab-content">
 <p>Text</p>
</div>

Here's the tab function:

function openSubSvc(evt, subSvcName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tab-content");
    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(subSvcName).style.display = "block";
    evt.currentTarget.className += " active";
}

Here is the CSS:

.tab {
 float: left;
 padding:0!important;
 margin:0!important;
}

.tab button {
 padding: 15px;
 width: 100%;
 text-align: left;
 transition: 0.3s;
}

.tab button:last-child {margin-bottom:0;}
.tab button:hover {background-color: #ddd;}
.tab button.active {background-color: #ccc;}

.tab-content {
 width:70.8%!important;
 margin-left:2%!important;
 margin-bottom:0;
 padding:0!important;
}

So if the first tab is clicked and the content opens, I need the content to close when it is clicked again.

Upvotes: 1

Views: 397

Answers (4)

natali dian
natali dian

Reputation: 1

just add an if to check your clicked tab "display", if it's "block" so you just change it to none, else "run other codes"

function openSubSvc(evt, subSvcName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
tablinks = document.getElementsByClassName("tablinks");
selected_tab = document.getElementById(subSvcName);
//check if a tab is active 
if (selected_tab.style.display === "block"){
        active_tab.style.display = "none"
        for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
}
else { //check if a tab is not active do the normal job
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
     selected_tab.style.display = "block";
        evt.currentTarget.className += " active";
}
}

Upvotes: 0

Angelo de salves
Angelo de salves

Reputation: 1

You can update the function this way:

function openSubSvc(evt, subSvcName) {
    var i, tabcontent, tablinks, me, shoulOpenTab;

    me = document.getElementById(subSvcName);
    // Checks if this tab has class active
    isActive = me.classList.contains("active");

    tabcontent = document.getElementsByClassName("tab-content");
    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", "");
    }

    // If this tab has active class onClick, you don't need to select again
    if (!isActive) {
        me.style.display = "block";
        evt.currentTarget.className += " active";
    }
}

Upvotes: 0

Hassan Siddiqui
Hassan Siddiqui

Reputation: 2845

You have to check active class on a clicked button. I just update your code with if condition. Thanks

function openSubSvc(evt, subSvcName) {
    var activeClass = evt.target.classList.contains("active")
    if(!activeClass){
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tab-content");
      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(subSvcName).style.display = "block";
      evt.currentTarget.className += " active";
    } else {
      document.getElementById(subSvcName).style.display = "none";
      evt.target.classList.remove("active");
    }
}
<div class="tab w-30 ml-100 mp-100">
 <button class="tablinks" id="tab1" onclick="openSubSvc(event, 'srv1-sub1')" >Sub-Service 1</button>
 <button class="tablinks" id="tab2" onclick="openSubSvc(event, 'srv1-sub2')">Sub-Service 2</button>
 <button class="tablinks" id="tab3" onclick="openSubSvc(event, 'srv1-sub3')">Sub-Service 3</button>
</div>

<div id="srv1-sub1" class="tab-content">
 <p>Text 1</p>
</div>

<div id="srv1-sub2" class="tab-content">
 <p>Text 2</p>
</div>

<div id="srv1-sub3" class="tab-content">
 <p>Text 3</p>
</div>

Upvotes: 2

salezica
salezica

Reputation: 76899

You can check whether the clicked tab is already visible. When you do:

document.getElementById(subSvcName).style.display = "block";

First, ask if it is already block (untested, unstylish code ahead):

var el = document.getElementById(subSvcName);

if (el.style.display !== 'none') {
    el.style.display = 'none'; // hide if already visible
} else {
    el.style.display = 'block' // show otherwise
}

Upvotes: 0

Related Questions