BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Tabs

Overview

Tabs sets let a user navigate to related information on a topic without leaving the page or having to navigate else where Tab sets keep the user in context of the overall content, when the content is vast and need to be sectioned out into meaningful topics.

UX Best Practice: Use on product detail templates & account detail templates.

Use when:

  • • More information exists than an accordion can handle
  • • The additional content is also much more visually complex (may include graphs, flips, etc.)

Tabs - Desktop

Desktop:

  • • All tabs appear.
  • • The active tab appears green with black font.
  • • The non-active tabs appear blue with white font.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.

  • Download Associated Javascripts:Zip
  • Download Associated Jquery Files:Zip


Hide Show CSS
                        
       /* ===================================================================== */
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	
	
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 15px;
	margin-left: 5px;
	border-bottom-width: 0;
	white-space: nowrap;
	background:#007ABC;
	border:0px;
	border-radius:0 5px 0 0;
	height:35px;
	outline:0;
	
	
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	
	float: left;
	padding: 0 25px 0 25px;
	line-height:35px;
	text-decoration: none;
	color:#FFFFFF;
	font-size:14px;
	
}


.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	top: 10px;
	margin-bottom: 0px;
	background:#A4CE4E;
	height:55px;
}

.ui-tabs .ui-tabs-nav img{
	width:20px;
	height:auto;
	padding-top:5px;
	margin-left:10px;
	margin-right:10px
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	line-height:45px;
	cursor: text;
	font-weight:bold;
	color:#333333;
	text-decoration:underline;
	
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
	margin-top:-10px;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	border-top:#A4CE4E 10px solid;
	padding: 1em 1.4em;
	background: none;
}


/*======= Tab dots ========*/

.ml-tab-dots{
	-moz-border-radius : 50%; /* Firefox */
    -webkit-border-radius : 50%; /* Safari & Chrome */
    -khtml-border-radius : 50%; /* Linux browsers */
    border-radius : 50%; /* CSS3 compatible browsers */
    width: 10px;
    height: 10px;
    background: #999999;
    display:inline-block;
	cursor:pointer;
	margin:0px 10px 15px 0px;
}

.ml-tab-dots-active{
    width: 13px;
    height: 13px;
    background: #A4CE4E;
	
}
/* ===================================================================== */
      
        
        
                            
HideShow HTML
                                                
<div id="tabs">
<ul>
<li><a href="#tabs-1">First Tab</a></li>
<li><a href="#tabs-2">Second Tab</a></li>
<li><a href="#tabs-3">Third Tab</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div> <!-- ======== script ======== -->
<script>
$( "#tabs" ).tabs();
</script>

Tabs - Tablets & Mobile

Tablets and Mobile: The first tab and its title appear. But the only other tab has an arrow button that when clicked, shows a takeover menu. The title and body text below changes as user clicks the arrow.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Hide Show CSS
                        
       
      /* ===================================================================== */
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	
	
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 15px;
	margin-left: 5px;
	border-bottom-width: 0;
	white-space: nowrap;
	background:#007ABC;
	border:0px;
	border-radius:0 5px 0 0;
	height:35px;
	outline:0;
	
	
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	
	float: left;
	padding: 0 25px 0 25px;
	line-height:35px;
	text-decoration: none;
	color:#FFFFFF;
	font-size:14px;
	
}


.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	top: 10px;
	margin-bottom: 0px;
	background:#A4CE4E;
	height:55px;
}

.ui-tabs .ui-tabs-nav img{
	width:20px;
	height:auto;
	padding-top:5px;
	margin-left:10px;
	margin-right:10px
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	line-height:45px;
	cursor: text;
	font-weight:bold;
	color:#333333;
	text-decoration:underline;
	
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
	margin-top:-10px;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	border-top:#A4CE4E 10px solid;
	padding: 1em 1.4em;
	background: none;
}


/*======= Tab dots ========*/

.ml-tab-dots{
	-moz-border-radius : 50%; /* Firefox */
    -webkit-border-radius : 50%; /* Safari & Chrome */
    -khtml-border-radius : 50%; /* Linux browsers */
    border-radius : 50%; /* CSS3 compatible browsers */
    width: 10px;
    height: 10px;
    background: #999999;
    display:inline-block;
	cursor:pointer;
	margin:0px 10px 15px 0px;
}

.ml-tab-dots-active{
    width: 13px;
    height: 13px;
    background: #A4CE4E;
	
}
/* ===================================================================== */
        
        
                            
HideShow HTML
                                                

<div id="tabs2">
<ul>
<li><a href="#tabs2-1">First Tab</a></li>
<li><img src="/assets/patterns/img/pagination/chevron-next-hover.png" alt="Tabs Navigation"/></li>
</ul>
<div id="tabs2-1">
<div>
<div class="ml-tab-dots ml-tab-dots-active"></div>
<div class="ml-tab-dots"></div>
<div class="ml-tab-dots"></div>
<div class="ml-tab-dots"></div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

</div>

</div> <!-- ======== script ======== -->
<script>
$( "#tabs2" ).tabs();
</script>