Tabs

HTML

<ul class="tabs"> 
        <li class="active" rel="tab1"> Tab1</li>
        <li rel="tab2"> Tab2</li>
        <li rel="tab3"> Tab3</li>
        <li rel="tab4"> Tab4</li>
    </ul>


<div class="tab_container"> 

     <div id="tab1" class="tab_content"> 
 
            <strong>
        <iframe src="https://docs.google.com/document/d/e/2PACX-1vRQM7263lJV6JUd__HAA1xnANUVR5Si86--CO3KPW17cmITV_xzZhzacs7XscoY7GX27PQX1CbI7I4z/pub?embedded=true"></iframe>
         </strong>
         </p>

     </div><!-- #tab1 -->
     <div id="tab2" class="tab_content"> 


      	<strong>
      	Mortal Kombat returns after a lengthy hiatus and puts players
      	back into the Tournament for 2D fighting with gruesome combat.
      	</strong>
       </p>

     </div><!-- #tab2 -->
     <div id="tab3" class="tab_content"> 


      	<strong>
      	Halo: Reach is the culmination of the superlative combat, sensational
      	multiplayer, and seamless online integration that are the hallmarks
      	of this superb series.
      	</strong>
       </p>

     </div><!-- #tab3 -->
     <div id="tab4" class="tab_content"> 

      	<strong>
      	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.
      	</strong>
       </p>

     </div><!-- #tab4 --> 
     
 </div> <!-- .tab_container -->

CSS

ul.tabs {
		margin: 0;
		padding: 0;
		float: left;
		list-style: none;
		height: 32px;
		border-bottom: 1px solid #999999;
		border-left: 1px solid #999999;
		width: 100%;
	}
	ul.tabs li {
		float: left;
		margin: 0;
		cursor: pointer;
		padding: 0px 21px ;
		height: 31px;
		line-height: 31px;
		border: 1px solid #999999;
		border-left: none;
		font-weight: bold;
		background: #EEEEEE;
		overflow: hidden;
		position: relative;
	}
	ul.tabs li:hover {
		background: #CCCCCC;
	}	
	ul.tabs li.active{
		background: #FFFFFF;
		border-bottom: 1px solid #FFFFFF;
	}
	.tab_container {
		border: 1px solid #999999;
		border-top: none;
		clear: both;
		float: left; 
		width: 100%;
		background: #FFFFFF;
	}
	.tab_content {
		padding: 20px;
		font-size: 1.2em;
		display: none;
	}

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(); 
	});
});