---
title: "How to hide other tabs's content and display only the selected tab's content"  
description: "How to hide other tabs's content and display only the selected tab's content"  
author: "Anonymous User"  
published: 2013-05-09  
updated: 2013-05-09  
canonical: https://www.mindstick.com/forum/849/how-to-hide-other-tabs-s-content-and-display-only-the-selected-tab-s-content  
category: "javascript"  
tags: ["javascript"]  
reading_time: 2 minutes  

---

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

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](https://yourviews.mindstick.com/view/85458/alan-turing-the-mastermind-behind-cracking-the-enigma-code-during-world-war-ii) as following.\
[HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) Code\
<ul [class](https://www.mindstick.com/blog/165/generic-class-in-c-sharp)="side bar tabs"> <li id = "tabs1" [onclick](https://www.mindstick.com/forum/12718/onclick-for-hyperlink) = "showStuff('tabs-1')">City</li> <li id = "tabs2" onclick = "showStuff('tabs-2')">[Country](https://yourviews.mindstick.com/view/85543/do-you-think-that-french-will-be-islamic-country)</li> <li id = "tabs3" onclick = "showStuff('tabs-3')">Humanity</li> </ul>\
<div id="tabs-1" [style](https://www.mindstick.com/articles/126300/apa-citation-style-get-to-know-about-it-for-your-next-assignment) = "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](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) Code\
<[script](https://www.mindstick.com/interview/477/how-can-i-execute-a-php-script-using-command-line) type="text/javascript">[function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) showStuff (id) { if (document.getElementById(id).style.display === "[block](https://www.mindstick.com/forum/157599/explain-the-process-control-block-pcb-in-the-operating-system)") { document.getElementById(id).style.display = "none"; } else { document.getElementById(id).style.display = "block"; } }</script>\
Please help me as soon as possible.Thanks in advance. \
\

## Replies

### Reply by AVADHESH PATEL

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.


---

Original Source: https://www.mindstick.com/forum/849/how-to-hide-other-tabs-s-content-and-display-only-the-selected-tab-s-content

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.