Home > DeveloperSection > Forums > How to hide other tabs's content and display only the selected tab's content
Brad Pitt
Brad Pitt

Total Post:61

Points:429
Posted on    May-09-2013 5:26 AM

 JavaScript JavaScript 
Ratings:


 1 Reply(s)
 1051  View(s)
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. 




AVADHESH PATEL

Total Post:604

Points:4228
Posted on    May-09-2013 8:09 AM

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.

Don't want to miss updates? Please click the below button!

Follow MindStick