Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / how to hide other tabs's content and display only the selected tab's content
Ask Question

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

Anonymous User 2729 09 May 2013
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. 


javascript javascript
Updated 09 May 2013
Anonymous User
Anonymous User

Other

I am a content writter !

Message

1 Answers

AVADHESH PATEL
AVADHESH PATEL 09 May 2013
Report Abuse
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.
MindStick Training