JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div id="top"></div>
 <h1>Create a Neat Content Box with Tabs using CSS & jQuery</h1>
 <ul class="tabs"> 
         <li class="active" rel="tab1"> Call of Duty</li>
         <li rel="tab2"> Mortal Combat</li>
         <li rel="tab3"> Halo</li>
         <li rel="tab4"> Portal</li>
     </ul>
 
 <div class="tab_container"> 
      <div id="tab1" class="tab_content"> 
      <img src="http://www.entheosweb.com/tutorials/css/images/tabs/cod.jpg"> <br />
          Call of Duty: Black Ops bears the series' standard superbly,
          delivering an engrossing campaign and exciting competitive multiplayer.
      </div><!-- #tab1 -->
      <div id="tab2" class="tab_content"> 
        <img src="http://www.entheosweb.com/tutorials/css/images/tabs/mortal combat.jpg"> <br />
           Mortal Kombat returns after a lengthy hiatus and puts players
           back into the Tournament for 2D fighting with gruesome combat.
      </div><!-- #tab2 -->
      <div id="tab3" class="tab_content"> 
 <img src="http://www.entheosweb.com/tutorials/css/images/tabs/halo.jpg"> <br />
           Halo: Reach is the culmination of the superlative combat, sensational
           multiplayer, and seamless online integration that are the hallmarks
           of this superb series.
      </div><!-- #tab3 -->
      <div id="tab4" class="tab_content"> 
    <img src="http://www.entheosweb.com/tutorials/css/images/tabs/portal.jpg"> <br />
           Portal 2 is an action shooter game from Valve Software that draws 
           from the original formula of innovative gameplay, story, and music,
           which earned the original Portal more than 70 industry accolades.
      </div><!-- #tab4 --> 
       </div>
 
 <p class="credit">Creativity by: <a href="http://beben-koben.blogspot.com/" title="Prodigy of head">Prodigy of Head</a></p>
 <div id="footer">
 <h2>Beben Koben</h2>
 <a href="http://beben-koben.blogspot.com/2010/09/make-tabs-using-jquery-plug-in.html" title=" Make Tabs Using jQuery Plug-in"...

CSS

*{margin:0;padding:0}
article, aside, footer, header, menu, nav, section { display: block; }
body{background:#debe94;color:#555;display:block;font:13px/1.3 'Segoe...

JavaScript

$(document).ready(function() {

    $(".tab_content").hide();
    $(".tab_content:first").show(); 
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).attr("rel"); 
        $("#"+activeTab).fadeIn(); 
    });
});