HOW TO HIDE OTHER TABS'S CONTENT AND DISPLAY ONLY THE SELECTED TAB'S CONTENT

Brad Pitt

Total Post:61

Points:429
Posted by  Brad Pitt
 1443  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. AVADHESH PATEL

    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

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!