How to hide other tabs's content and display only the selected tab's content

Question

When I click on a particular tab the other tabs's content should be hidden but it is not hiding. This is all the code I have.

function showStuff(id) {
  if (document.getElementById(id).style.display === "block") {
    document.getElementById(id).style.display = "none";
  } else {
    document.getElementById(id).style.display = "block";
  }
}

<ul class="side bar tabs">
  <li id="tabs1" onclick="showStuff('tabs-1')">City</li>
  <li id="tabs2" onclick="showStuff('tabs-2')">Country</li>
  <li id="tabs3" onclick="showStuff('tabs-3')">Humanity</li>
</ul>

<div id="tabs-1" style="display : none">
  <p>Proin elit m</p>
</div>
<div id="tabs-2" style="display : none">
  <p>M massa ut d</p>
</div>
<div id="tabs-3" style="display : none">
  <p> sodales.</p>
</div>

Could you add the HTML for the tab content please? – andyb May 09 '13 at 07:51 — andyb, May 09 '13 at 07:51
Did you set `id` for your tab contents? – MahanGM May 09 '13 at 07:56 — MahanGM, May 09 '13 at 07:56
yeah all my tab contens have Id's – user1223844 May 09 '13 at 07:56 — user1223844, May 09 '13 at 07:56

score 8 · Accepted Answer · edited May 23 '17 at 12:23

Giving all the tab content elements a common CSS class makes selecting and styling them much easier, for example in this demo and code below.

CSS

.tabContent {
    display:none;
}

JavaScript

function showStuff(element)  {
    var tabContents = document.getElementsByClassName('tabContent');
    for (var i = 0; i < tabContents.length; i++) { 
        tabContents[i].style.display = 'none';
    }

    // change tabsX into tabs-X in order to find the correct tab content
    var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
    document.getElementById(tabContentIdToShow).style.display = 'block';
}

HTML

<ul class="side bar tabs">
    <li id="tabs1" onclick="showStuff(this)">City</li>
    <li id="tabs2" onclick="showStuff(this)">Country</li>
    <li id="tabs3" onclick="showStuff(this)">Humanity</li>  
</ul>

<div id="tabs-1" class="tabContent">
    <p>Proin elit m</p>
</div>
<div id="tabs-2" class="tabContent">
    <p>M massa ut d</p>
</div>
<div id="tabs-3" class="tabContent">
    <p> sodales.</p>
</div>

I have also updated the showElement function to be more generic so that there is less code duplication when hiding and showing the correct tab content.

The only caveat is that getElementsByClassName() is not available in IE8 or below. Other (modern) browsers have this function but there are alternatives - see getElementsByClassName & IE8: Object doesn't support this property or method.

MahanGM · Answer 2 · 2013-05-09T07:58:45.967

You have to first set a display: none for all of your tab contents.

e. g.

<script type="text/javascript">
function showTab(selected, total)
{
  for(i = 1; i <= total; i += 1)
  {
    document.getElementById('tabs-' + i).style.display = 'none';
  }

  document.getElementById('tabs-' + selected).style.display = 'block';
}
</script>

<div id="tabs-1" style="display: none">tab1</div>
<div id="tabs-2" style="display: none">tab2</div>
<div id="tabs-3" style="display: none">tab3</div>

<ul class="side bar tabs">
  <li id = "tabs1" onclick = "showTab(1,3)">City</li>
  <li id = "tabs2" onclick = "showTab(2,3)">Country</li>
  <li id = "tabs3" onclick = "showTab(3,3)">Humanity</li>  
</ul>

If there is something like this with your code, I'm sure that it's going to work. BTW, Check your Console window for JavaScript errors.

Those are the Tab headings, for the tab content I have done it. — user1223844, May 09 '13 at 07:49

Tdy · Answer 3 · 2013-05-09T08:04:40.693

I think that this should do it:

<ul class="side bar tabs">
    <li  id = "tabs1" onclick = "showStuff('tabs-1')">City</li>
    <li  id = "tabs2" onclick = "showStuff('tabs-2')">Country</li>
    <li  id = "tabs3" onclick = "showStuff('tabs-3')">Humanity</li>  
</ul>

  <script type="text/javascript">
  function showStuff (id) 
  {

        document.getElementById("tabs-1").style.display = "none";
        document.getElementById("tabs-2").style.display = "none";
        document.getElementById("tabs-3").style.display = "none";
        document.getElementById(id).style.display = "block";

  }
  </script>

  <div id="tabs-1" style="display:none">tabs 1 content</div>
  <div id="tabs-2" style="display:none">tabs 2 content</div>
  <div id="tabs-3" style="display:none">tabs 3 content</div>

Vaibhav Jain · Answer 4 · 2013-05-09T08:22:52.417

0

<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

<div id="tabs">
 <ul>
  <li><a href="#tabs-1">City</a></li>
  <li><a href="#tabs-2">Country</a></li>
  <li><a href="#tabs-3">Humanity</a></li>
 </ul>
 <div id="tabs-1">..............</div>
 <div id="tabs-2">..............</div>
 <div id="tabs-3">..............</div>
</div>

edited May 09 '13 at 08:22

answered May 09 '13 at 07:58

Vaibhav Jain

3,729
3
25
42

No, using jQuery and jQueryUI is not necessarily the best option. It has the overhead of a lot of JavaScript code. – andyb May 09 '13 at 08:22
@andyb : agree, removed that line. Thanks. – Vaibhav Jain May 09 '13 at 08:23
I don't think the OP is looking for a jQuery solution. – andyb May 09 '13 at 08:42

score 0 · Answer 5 · answered May 09 '13 at 07:59

0

you can try this

 function showStuff(id){
$('#tabs1').empty();
  $('#tab2').show();
}

or the other way

answered May 09 '13 at 07:59

gewel

411
7
7

I don't think the OP is looking for a jQuery solution. – andyb May 09 '13 at 08:40

How to hide other tabs's content and display only the selected tab's content

5 Answers5

Linked