Monday, September 5, 2011

JavaScript: Simple show hide content II

JavaScript 1
<script language="javascript">
function show_tab(id){
 var tabId = [1,2,3];
 var idx = tabId.indexOf(id); // Find index which in the array
 if(idx!=-1) tabId.splice(idx, 1); // Remove element from array
 
 // show content
 document.getElementById('tab' + id).style.display = 'block';
 
 // hide content
 for(var i = 0; i < tabId.length; i++){
  document.getElementById('tab' + tabId[i]).style.display = 'none';
 }
}
</script>
Or: JavaScript 2
<script language="javascript">
function show_tab(id){  
 for(var i=1; i<4; i++){
  if(i == id){
   // show content
   document.getElementById('tab'+i).style.display='block';
  }else {
   // hide content
   document.getElementById('tab'+i).style.display='none';
  }
 }
}
</script>
HTML
<a href="javascript:void(0)" onclick="show_tab(1)">Tab 1</a> |
<a href="javascript:void(0)" onclick="show_tab(2)">Tab 2</a> |
<a href="javascript:void(0)" onclick="show_tab(3)">Tab 3</a>

<div id="tab1">content 1</div>
<div id="tab2" style="display:none;">content 2</div>
<div id="tab3" style="display:none;">content 3</div>

Refer:
Simple show hide content I
http://wolfram.kriesing.de/blog/index.php/2008/javascript-remove-element-from-array

2 comments:

  1. Wonderful post. Solved an issue I was having. Thanks.

    ReplyDelete
  2. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training in India. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai

    ReplyDelete