user3482299
Reputation: 1
JQuery Tabbed Content
Apologies of this has been covered before but I couldn't find anything specific...
I'm new to JQuery and have created some tabbed content boxes that work well, however, I know the code used isn't as efficient as it should be!
Is there a way I can optimise the code below so that I don't have to specify each tabbed button and each tabbed content?
Thanks in advance for any help! Code below :)
HTML
<div id="tabs">
<div id="tabbed-buttons">
<div id="tb" class="tb1">
Plumbing
</div>
<div id="tb" class="tb2">
Heating
</div>
<div id="tb" class="tb3">
Underfloor Heating
</div>
<div id="tb" class="tb4">
Renewable Energy
</div>
</div>
<div id="tabbed-content">
<div id="tc1">
Text for tabbed content 1
</div>
<div id="tc2">
Text for tabbed content 2
</div>
<div id="tc3">
Text for tabbed content 3
</div>
<div id="tc4">
Text for tabbed content 4
</div>
</div>
</div>
JQUERY
// ---------- ---------- Tabbed Content ---------- ----------
$(document).ready(function(){
$("#tc2, #tc3, #tc4").hide();
$(".tb1").css({
background: "#4867ad",
background: "-moz-linear-gradient(top, #273264 0%, #4867ad 100%)",
background: "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#273264), color-stop(100%,#4867ad))",
background: "-webkit-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-o-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-ms-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "linear-gradient(to bottom, #273264 0%,#4867ad 100%)",
color: "#fff"
});
$(".tb1").click(function()
{
$("#tc1").show();
$("#tc2, #tc3, #tc4").hide();
$(".tb1").css({
background: "#4867ad",
background: "-moz-linear-gradient(top, #273264 0%, #4867ad 100%)",
background: "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#273264), color-stop(100%,#4867ad))",
background: "-webkit-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-o-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-ms-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "linear-gradient(to bottom, #273264 0%,#4867ad 100%)",
color: "#fff"
});
$(".tb2, .tb3, .tc4").css({background:"auto",color:"#444"});
});
$(".tb2").click(function()
{
$("#tc1, #tc3, ¢tc4").hide();
$("#tc2").show();
$(".tb2").css({
background: "#4867ad",
background: "-moz-linear-gradient(top, #273264 0%, #4867ad 100%)",
background: "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#273264), color-stop(100%,#4867ad))",
background: "-webkit-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-o-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-ms-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "linear-gradient(to bottom, #273264 0%,#4867ad 100%)",
color: "#fff"
});
$(".tb1, .tb3, .tc4").css({background:"auto",color:"#444"});
});
$(".tb3").click(function()
{
$("#tc1, #tc2, #tc4").hide();
$("#tc3").show();
$(".tb3").css({
background: "#4867ad",
background: "-moz-linear-gradient(top, #273264 0%, #4867ad 100%)",
background: "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#273264), color-stop(100%,#4867ad))",
background: "-webkit-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-o-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-ms-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "linear-gradient(to bottom, #273264 0%,#4867ad 100%)",
color: "#fff"
});
$(".tb1, .tb2, .tb4").css({background:"auto",color:"#444"});
});
$(".tb4").click(function()
{
$("#tc1, #tc2, #tc3").hide();
$("#tc4").show();
$(".tb4").css({
background: "#4867ad",
background: "-moz-linear-gradient(top, #273264 0%, #4867ad 100%)",
background: "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#273264), color-stop(100%,#4867ad))",
background: "-webkit-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-o-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "-ms-linear-gradient(top, #273264 0%,#4867ad 100%)",
background: "linear-gradient(to bottom, #273264 0%,#4867ad 100%)",
color: "#fff"
});
$(".tb1, .tb2, .tb3").css({background:"auto",color:"#444"});
});
});
Upvotes: 0
Views: 186
Answers (3)
Razvan Zamfir
Reputation: 4704
Here is a way to "tabulate" a given content. You don't have to add IDs to the content elements:
function TabbedNav() {
// Select all the articles and hide them
var allArticles = $('div.articlesContainer').children('article');
$(allArticles).hide();
// Show the first article
$(allArticles[0]).show();
// Add class "active" to first tab
var allTabs = $('ul.tabbednav').children('li');
$(allTabs[0]).addClass('active');
$('ul.tabbednav li a').each(function (index) {
$(this).click(function () {
// Add class "active" to clicked tab
$(this).parent().addClass('active');
// Remove class "active" from all other tabs
$('ul.tabbednav li a').not(this).parent().removeClass('active');
// Active article
var activeArticle = $(allArticles[index]);
// Hide all articles but the active one
$('div.articlesContainer article').hide();
// Show active article
$(activeArticle).show();
});
});
}
TabbedNav();.content {
max-width:500px;
font-family: Arial, sans-serif;
margin: 10px auto;
-moz-box-shadow: 1px 1px 2px 0 rgba(0,0,0,.15);
-webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,.15);
box-shadow: 1px 1px 2px 0 rgba(0,0,0,.15);
}
ul.tabbednav {
list-style-type:none;
margin:0;
padding:0;
height:31px;
border-bottom: 1px solid #ccc;
display: flex;
}
ul.tabbednav li {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
ul.tabbednav li a {
display: block;
text-align: center;
text-decoration: none;
color:#777;
font-size: 12px;
font-weight: 600;
padding: 0 8px;
height:30px;
line-height:30px;
border: 1px solid #ccc;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background: #ffffff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */
}
ul.tabbednav li.active a {
color:#111;
background:#fff;
border-bottom: 1px solid #fff;
}
.articlesContainer {
position: relative;
background:#fff;
border: 1px solid #ccc;
border-top: none;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
article {
padding: 10px;
color:#222;
background: #fff;
}
.articlesContainer {
background:#fff;
border: 1px solid #ccc;
border-top: none;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
article h1 {
padding: 10px 0 0 0;
margin:0 0 5px 0;
}
article ul {
margin: 0;
}
article p,
article ul li {
font-size: 12px;
line-height: 1.5;
margin:0;
}
article p {
text-align: justify;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<ul class="tabbednav">
<li><a href="#">Description</a></li>
<li><a href="#">Delivery</a></li>
<li><a href="#">Composition</a></li>
</ul>
<div class="articlesContainer">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie eros ac euismod pretium. Sed rhoncus lectus nec metus aliquet porta. Cras cursus justo odio, at tristique erat convallis id. Duis venenatis scelerisque justo. Maecenas iaculis malesuada lacus, id ultricies dui.</p>
</article>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie eros ac euismod pretium. Sed rhoncus lectus nec metus aliquet porta. Cras cursus justo odio, at tristique erat convallis id. Duis venenatis scelerisque justo. Maecenas iaculis malesuada lacus, id ultricies dui. Nam scelerisque elit vitae lacus gravida, eget sodales nibh faucibus. Nulla elit sapien, molestie in mattis eget, consectetur vitae ipsum. Donec ut placerat magna, ut sodales tortor. Sed quis turpis tincidunt, fringilla felis ut, venenatis nisi. Proin egestas viverra nulla, nec dignissim nisi molestie eget.</p>
</article>
<article>
<ul>
<li>Cotton 80%</li>
<li>Cotton 10%</li>
<li>Elastan 10%</li>
</ul>
</article>
</div>
</div>Upvotes: 0
Razvan Zamfir
Reputation: 4704
Thy this:
$("#tabbed-buttons").on("click", "div", function() {
$('#tabbed-buttons div').removeClass('active');
$(this).addClass('active');
$('#tabbed-content div').hide();
$('#' + $(this).data('content')).show();
});
$("#tabbed-buttons > div:first").click();#tabs {
font-family: Arial, sans-serif;
max-width: 560px;
margin: 0 auto;
}
#tabbed-buttons {
overflow: hidden;
}
#tabbed-buttons > div {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 25%;
float: left;
cursor: pointer;
text-align: center;
color: #3a3a3a;
font-size: 12px;
font-weight: 600;
padding: 0 8px;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
bprder-bottom: none;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background: #efefef;
}
#tabbed-buttons > div.active {
background: #fff;
color: #222;
border: 1px solid #ccc;
border-bottom: 1px solid #fff;
}
#tabbed-content {
clear: both;
border: 1px solid #ccc;
border-top: none;
background: #fff;
padding: 10px;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
#tabbed-content h3 {
margin: 0 0 5px 0;
}
#tabbed-content p {
font-size: 12px;
line-height: 1.5;
text-align: justify;
margin: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs">
<div id="tabbed-buttons">
<div data-content="tc1">Plumbing</div>
<div data-content="tc2">Heating</div>
<div data-content="tc3">Underfloor Heating</div>
<div data-content="tc4">Renewable Energy</div>
</div>
<div id="tabbed-content">
<div id="tc1">
<h3>Plumbing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis delectus quasi tempora, voluptatibus quis ex maiores minima, nesciunt itaque qui eveniet, sequi tempore, quia recusandae atque omnis soluta cum dicta.</p>
</div>
<div id="tc2">
<h3>Heating</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores iste sed odio laborum similique odit eos quo, excepturi quasi quos pariatur aut quidem sunt officiis blanditiis veritatis ut rem natus!</p>
</div>
<div id="tc3">
<h3>Underfloor Heating</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aspernatur veritatis dignissimos odio odit cupiditate iusto dolore sapiente laudantium quam a maiores repudiandae illum accusantium laborum temporibus ipsa, delectus eius!</p>
</div>
<div id="tc4">
<h3>Renewable Energy</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, provident cupiditate, explicabo error pariatur ipsam nam, corrupti laudantium atque impedit et quibusdam! Laborum error itaque dolores ullam ipsum dicta omnis.</p>
</div>
</div>
</div>Upvotes: 0
tliokos
Reputation: 3636
HTML
Watch the correspondence between the id's of the buttons and the content.
id="tab-1" corresponds to id="content-tab-1" etc.
<div id="tabs">
<div id="tabbed-buttons">
<div id="tab-1">Plumbing</div>
<div id="tab-2">Heating</div>
<div id="tab-3">Underfloor Heating</div>
<div id="tab-4">Renewable Energy</div>
</div>
<div id="tabbed-content">
<div id="content-tab-1">Text for tabbed content 1</div>
<div id="content-tab-2">Text for tabbed content 2</div>
<div id="content-tab-3">Text for tabbed content 3</div>
<div id="content-tab-4">Text for tabbed content 4</div>
</div>
</div>
CSS
Place the css for the active button in a single class. Add your style as needed ...
.active {
background: #4867ad;
color: #fff;
}
JQUERY
$(function(){
$("#tabbed-buttons").on("click", "div", function() {
// Remove active class from all tab buttons
$('#tabbed-buttons div').removeClass('active');
// Add active class to clicked button
$(this).addClass('active');
// Hide all content divs
$('#tabbed-content div').hide();
// Show the one that corresponds to clicked button
$('#content-' + $(this).prop('id')).show();
});
$("#tab-1").click(); // Init by clicking in 1st buton
});
Upvotes: 2