Advanced Search

Horizontal Tabbed Container

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type='text/javascript'>
  2. $(document).ready(function(){
  3.  
  4. $("div.tab").click(function () {  
  5.  
  6. $(".contentOn").removeClass("contentOn");  
  7.  
  8. $(this).addClass("contentOn");  
  9.  
  10. $(".content").hide();  
  11.  
  12. var content_show = $(this).parent("li").attr("title");  
  13. $("#"+content_show).show();  
  14.  
  15. });
  16.  
  17. });
  18.  
  19. </script>
  20.  
  21. <div id='newsContainer'><ul id='tabs'>
  22. <li title='pnlNews1'><div id='btnTab1' title='' class='tab'>News</div></li>
  23. <li title='pnlNews2'><div id='btnTab2' title='' class='tab'>Events</div></li>
  24. <li title='pnlNews3'><div id='btnTab3' title='' class='tab'>Promotions</div></li></ul>
  25.  
  26. <div id='pnlNews1' class='content contentOn'>
  27. <ul>Content</ul></div>
  28.  
  29. <div id='pnlNews2' class='content'>
  30. <ul>Content</ul></div>
  31.  
  32. <div id='pnlNews3' class='content'>
  33. <ul>Content</ul</div></div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.