Two instances of one iner one Tabs on one page

Two instances of one iner one Tabs on one page

Dear All,


I have the need for two separate one iner one tabs on one page, any ideas how I can do this?

please check below code

JS

  2. <script type="text/javascript">//<![CDATA[ 
  3. window.addEvent('load', function() {
  4. $("#simple-tabs .tab_content").hide(); //Hide all content
  5. $("#simple-tabs ul.tabs li:first").addClass("active").show(); //Activate first tab
  6. $("#simple-tabs .tab_content:first").show(); //Show first tab content
  7. //On Click Event
  8. $("#simple-tabs ul.tabs li").click(function(e) {
  9.     $("#simple-tabs ul.tabs li").removeClass("active"); //Remove any "active" class
  10.     $(this).addClass("active"); //Add "active" class to selected tab
  11.     $("#simple-tabs .tab_content").hide(); //Hide all tab content
  12.     var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
  13.     $(activeTab).fadeIn(); //Fade in the active content
  14.         $('.video-container iframe[src*="http://www.youtube.com/embed/"]').each(function(i) {
  15.             this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
  16.         });
  17.     e.preventDefault();
  18. });


  21. (function($) {
  22.     $('.tab ul.tabs li:first-child a').addClass('current');
  23.     $('.tab .tab_content div.tabs_tab:first-child').show();

  25.     $('.tab ul.tabs li a').click(function(g) {
  26.         var tab = $(this).parent().parent().parent(),
  27.             index = $(this).parent().index();

  29.         tab.find('ul.tabs').find('a').removeClass('current');
  30.         $(this).addClass('current');

  32.         tab.find('.tab_content').find('div.tabs_tab').not('div.tabs_tab:eq(' + index + ')').slideUp();
  33.         tab.find('.tab_content').find('div.tabs_tab:eq(' + index + ')').slideDown();

  35.         g.preventDefault();

  37.     });
  38. })(jQuery);
  39. });//]]>  
  40. </script>




HTML

  2. <div id="simple-tabs">
  3.                      <ul class="tabs">
  4.                         <li><a href="#tab1">Simple Slider</a></li>
  5.                         <li><a href="#tab2">Static Image</a></li>
  6.                         <li><a href="#tab3">Embedded Video</a></li>
  7.                      </ul>
  8.                      <div class="tab_container">
  9.                      
  10.                      <div id="tab1" class="tab_content">
  11.             
  12.             
  13.             
  14.             Tab1
  15.             
  16.             
  17.             
  18.                         </div>                     
  19.                         
  20.                         <div id="tab2" class="tab_content">
  21.           Tab2
  22.                         </div>
  23.                         <div id="tab3" class="tab_content">
  24.                Tab3
  25.                         </div>
  26.                      </div>
  27.                      <div class="clear"></div>
  28.                   </div>




CSS



  3. /* Tabs
  4. ---------------------------------------- */
  5. #simple-tabs ul.tabs
  6. {
  7.   margin-right:40px;
  8.   margin-left:50px;
  9.   padding:0;
  10.   float:left;
  11.   list-style:none;
  12.   height:58px;
  13.   width:100%;
  14. }

  16. #simple-tabs ul.tabs li
  17. {
  18.   float:left;
  19.   margin-right:10px;
  20.   padding:0;
  21.   height:54px;
  22.   line-height:54px;
  23.   margin-bottom:-1px;
  24.   overflow:hidden;
  25.   position:relative;
  26.   background:#5d6872;
  27. }

  29. #simple-tabs ul.tabs li a
  30. {
  31.   text-decoration:none;
  32.   display:block;
  33.   padding:0 30px;
  34.   outline:none;
  35.   color:#FFF;
  36. }


  39. #simple-tabs ul.tabs li a:hover
  40. {
  41.   background:#CCC;
  42. }


  45. #simple-tabs ul.tabs li.active
  46. {
  47.   background:#FFF;
  48.   border:1px dotted #CCC;
  49.   border-bottom: none;
  50.   height:58px;
  51. }

  53. #simple-tabs ul.tabs li.active a
  54. {
  55.   color:#555;
  56. }


  59. #simple-tabs ul.tabs li.active a:hover
  60. {
  61.   background: none;
  62. }

  64. #simple-tabs .tab_container
  65. {
  66.   border-top:1px dotted #ccc;
  67.   overflow:hidden;
  68.   clear:both;
  69.   float:left;
  70.   width:100%;
  71.   background:#FFF;
  72. }


  75. #simple-tabs .tab_content
  76. {
  77.   padding:70px 50px 0 50px;
  78. }