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

Total Post:61

Points:429
 1828  View(s)
Ratings:
Rate this:
Hi Everyone!

I have few div in my webpage. I want to display only selected div from list. How I achieve this.  

I was try it to make but I fail. My following line of code as following.

HTML Code

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

JavaScript Code

<script type="text/javascript">
function showStuff (id) 
{
    if (document.getElementById(id).style.display === "block")
    {
        document.getElementById(id).style.display = "none";
    }
    else
    {
        document.getElementById(id).style.display = "block";
    }       
}
</script>

Please help me as soon as possible.
Thanks in advance. 


  1. Post:604

    Points:4228
    Re: How to hide other tabs's content and display only the selected tab's content

    Hi Brad!


    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.

Answer