CodePen

HTML

            
              <div id="contact-tabs-wrapper">
	<ul id="contact-tabs">
		<li><a id="slick-slidetoggle1" href="#">Call Us</a></li>
		<li class="middle-padding"><a id="slick-slidetoggle2" href="#">Stop By</a></li>
		<li><a id="slick-slidetoggle3" href="#">Email Us</a></li>
		<div class="clearer"></div>
	</ul>
	<!--END:contact-tabs-->
	<div id="contact-tabs-base">&nbsp;</div>
	<div id="contact-tabs-content-wrap">
		<div id="contact-tab-call-us">
			<ul>
				<li>Toll Free<br />
					1-800-000-0000</li>
				<li>Location 1<br />
					(410) 555-0000<br />
					Hours: Mon thru Sat 10-6, Thurs 10-8 EST</li>
				<li>Location 2<br />
					(443) 555-0000<br />
					Hours: Mon-Sat 10-6, Thu 10-8, Sun 12-5</li>
				<li>Location 3<br />
					(410) 555-4044<br />
					Hours: Mon-Sat 10-6, Thurs 10-8 </li>
			</ul>
		</div>
		<!--END:contact-tab-call-us-->
		<div id="contact-tab-stop-by">
			<p>Stop by on of our three convenient locations:</p>
			<ul>
				<li>Location 1<br />
					Street Address<br />
					CITY ST 00000<br />
					Hours: Mon thru Sat 10-6, Thurs 10-8 EST</li>
				<li>Location 2<br />
					Street Address<br />
					Street Address<br />
					CITY ST 00000<br />
					Hours: Mon-Sat 10-6, Thu 10-8, Sun 12-5</li>
				<li>Location3<br />
					Street Address<br />
					Street Address<br />
					CITY ST 00000<br />
					Hours: Mon-Sat 10-6, Thurs 10-8</li>
			</ul>
			<p>Click for driving directions.</p>
		</div>
		<!--END:contact-tab-stop-by-->
		<div id="contact-tab-email-us">
			<p>Additional content - maybe a form</p>
		</div>
		<!--END:contact-tab-email-us-->
	</div>
	<!--END:contact-tabs-content-wrap-->
</div>
            
          
!
via HTML Inspector

CSS

            
              /* this stops the horizontal page jump */
html{overflow-y:scroll;}
  
  #contact-tabs-wrapper {
  display: block;
	width: 738px;
	text-align: left;
	margin: 0 auto;
}
ul#contact-tabs {
}
ul#contact-tabs li a {
	font-family:Helvetica, Verdana, Arial, sans-serif;
	font-size:22px;
	line-height:44px;
	color: #FFF;
	font-weight: normal;
	text-decoration: none;
}
ul#contact-tabs li {
	display:block;
	width:226px;
	height:44px;
	text-align: center;
	float:left;
	clear:right;
	background-color: #333366;
}
ul#contact-tabs li.middle-padding {
	margin:0 30px;
}
#contact-tabs-base {
	background-color: #C93;
	height: 3px;
}
#contact-tabs-content-wrap {
	position:relative;
}
#contact-tabs-content-wrap > div {
	display:none;
}
#contact-tab-call-us, #contact-tab-stop-by, #contact-tab-email-us {
	background-color: #e6e6e6;
	display: block;
	width: 339px;
	padding: 15px;
	position:absolute;
}
#contact-tab-call-us {
	left: 0px;
	top: 0px;
}
#contact-tab-stop-by {
	margin: 0 auto;
	position: relative;
}
#contact-tab-email-us {
	right: 0px;
	top: 0px;
}
#contact-tabs-wrapper button.contact-tabs {
	font-size: 12px;
	color: #FFF;
	background-color: #335387;
	padding: 10px;
	border: 1px solid #C93;
	text-transform: uppercase;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function() {
  /*$('#contact-tabs > li').click(function(){
    var clicked = $(this).index();
    var clickedDiv = $('#contact-tabs-content-wrap > div').eq(clicked);
    
    $('#contact-tabs-content-wrap > div').each(function(i){
      if (i == clicked)
        $(this).slideToggle(400);
      else
        $(this).slideUp(400);
    });
  });*/
  $('#contact-tabs > li').hover(function() {
    var hovered = $(this).index();
    var slideDiv = $('#contact-tabs-content-wrap > div').eq(hovered);
    slideDiv.slideToggle(400);
  }, function() {
    var hovered = $(this).index();
    var slideDiv = $('#contact-tabs-content-wrap > div').eq(hovered);
    slideDiv.slideUp(400);
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................