I am working on a Responsive website, where I am developing a tabbed component. It works in a way that, in Desktop and Tablet, I render a menu, and on click of the menu button, I display the corresponding div like this.
Desktop and Tablet for Menu:
So when I select the different tab options, I display the corresponding tab contents. For mobile, I have to convert this menu into a Dropdown, which I was able to do. But on click of the dropdown value, I want to render the corresponding tab contents, which I am not able to do it. I want to display the corresponding tab on choosing the dropdown value. Any help is appreciated. Please find attached the JSFiddle.
function testFunction(evt, tabNumber) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabNumber).style.display = "block";
evt.currentTarget.className += " active";
}
$(document).ready(function() {
$('.dropdown > ul').toggleClass('no-js js');
$('.dropdown .js ul').hide();
$('.dropdown .js').click(function(e) {
$('.dropdown .js ul').slideToggle(200);
$('.dropbtn').toggleClass('active');
e.stopPropagation();
e.stopPropagation();
});
if ($('.dropdown .js ul').is(':visible')) {
$('.dropdown .js ul', this).slideUp();
$('.dropbtn').removeClass('active');
}
$("#filter-options-ul li").on("click", function() {
console.log('clicked');
var val = $(this).find('span').html();
//$('.filter-options').css('border-right', '20px solid' + col);
$('.dropbtn').html(val);
});
});
#media all and (min-width:320px) and (max-width:767px) {
.c-koh-tabbed-article .koh-article-header {
border-bottom: none;
}
.dropdown {
position: relative;
display: block;
margin-top: 30px;
margin-bottom: 30px;
}
.dropbtn {
background-color: #fff;
font-family: Helvetica Neue LT Pro Roman;
font-size: 14px;
color: #000;
width: 100%;
padding: 15px;
text-align: left;
border: 1px solid #e5e5e5;
cursor: pointer;
}
.dropbtn::after {
content: "\e600";
font-family: KohlerIcons;
font-size: 12px;
width: 16px;
height: 16px;
float: right;
margin-top: 5px;
box-sizing: border-box;
}
.dropdown ul {
position: relative;
padding-left: 0px;
font-weight: 400;
margin-bottom: 0;
font-size: 14px
}
.dropdown ul li {
position: relative;
list-style: none;
cursor: pointer;
}
.dropdown ul li ul {
position: absolute;
left: 0;
right: 0;
z-index: 9999;
}
.dropdown ul li ul {
padding-left: 0px;
}
.dropdown ul li li span {
font-family: Helvetica Neue LT Pro Roman;
font-size: 14px;
color: #000;
transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
display: block;
background: #fff;
padding: 20px 15px;
border: 1px solid #e5e5e5;
}
/* Fallbacks */
.dropdown .no-js ul {
display: none;
}
}
#media all and (min-width:768px) {
.dropdown {
display: none;
}
.c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set {
display: table;
border: none;
box-shadow: none;
}
.c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set li {
display: table-cell;
border-bottom: none;
}
.button-default {
font-family: Nexa W01 Heavy !important;
font-size: 14px !important;
color: #77777A !important;
display: inline !important;
width: 100% !important;
padding: 0px 20px !important;
height: 45px !important;
margin: 0 !important;
background: #FFF !important;
border: 1px solid #77777A !important;
color: #77777A !important;
border-radius: 0px !important;
text-transform: uppercase !important;
}
.button-default:hover {
background: #77777A !important;
color: #FFF !important;
}
.button-default.active {
background: #77777A !important;
color: #FFF !important;
}
.tabcontent {
margin: 30px 0px;
text-align: left;
width: 100%;
overflow: hidden;
}
}
.c-koh-tabbed-article .koh-article-header .koh-article-title {
font-family: Nexa W01 Heavy !important;
font-size: 30px !important;
color: #000 !important;
font-weight: bold !important;
}
.c-koh-tabbed-article .koh-article-header .koh-article-controls {
height: auto !important;
}
.strong {
font-family: Nexa W01 XBold !important;
font-size: 18px !important;
color: #000 !important;
}
.article-sub-text {
font-family: Helvetica Neue LT Pro Roman !important;
font-size: 14px !important;
color: #000 !important;
font-weight: 400 !important;
}
.left-column {
width: 50%;
float: left;
padding-right: 20px;
}
.right-column {
width: 50%;
float: left;
}
.right-column img {
display: block;
width: 100%;
height: auto;
}
#media all and (min-width:980px) {
.tabcontent {
margin: 30px 0px 30px 10px;
text-align: left;
width: 100%;
overflow: hidden;
}
.button-default {
font-family: Nexa W01 Heavy !important;
font-size: 14px !important;
color: #77777A !important;
display: inline !important;
width: auto !important;
padding: 0px 45px !important;
height: 45px !important;
margin: 0px 20px 0px 0px !important;
background: #FFF !important;
border: 1px solid #77777A !important;
color: #77777A !important;
border-radius: 0px !important;
text-transform: uppercase !important;
}
.button-default:last-child {
margin: 0px !important;
}
.button-default:hover {
background: #77777A !important;
color: #FFF !important;
}
.button-default.active {
background: #77777A !important;
color: #FFF !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="c-koh-tabbed-article">
<div class="koh-article-container">
<div class="koh-article-header">
<div class="koh-article-controls">
<ul class="koh-article-set">
<li><button onclick="testFunction(event,'tab1')" class="button-default tablinks">Blandit</button></li>
<li><button onclick="testFunction(event,'tab2')" class="button-default tablinks" href="javascript:void(0);">Aliquam</button></li>
<li><button onclick="testFunction(event,'tab3')" class="button-default tablinks" href="javascript:void(0);">Pharetra Maximus</button></li>
<li><button onclick="testFunction(event,'tab4')" class="button-default tablinks" href="javascript:void(0);">Tincidunt</button></li>
<li><button onclick="testFunction(event,'tab5')" class="button-default tablinks" href="javascript:void(0);">Condimentum</button></li>
</ul>
<div class="dropdown">
<ul class="no-js">
<li>
<button id="filter-options" class="dropbtn">Select One</button>
<ul id="filter-options-ul">
<li><span>Blandit</span></li>
<li><span>Aliquam</span></li>
<li><span>Pharetra Maximus</span></li>
<li><span>Tincidunt</span></li>
<li><span>Condimentum</span></li>
</ul>
</li>
</ul>
</div>
<div id="tab1" class="tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab65695_1800x800?$1800Hero$" alt="Kohler Image"></img>
</div>
</div>
<div id="tab2" class="container tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/aab27241_1800x800" alt="Kohler Image">
</div>
</div>
<div id="tab3" class="tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab80843_rgb?crop=(102,1521,4876,2167)$" alt="Kohler Image">
</div>
</div>
<div id="tab4" class="tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://s3.img-b.com/image/private/t_base,f_auto,c_lpad,h_800/product/Kohler/kohler-k-6331-alternate-image-4-473.jpg" alt="Kohler Image">
</div>
</div>
<div id="tab5" class="tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab42000_1800x800?$1800Hero$" alt="Kohler Image">
</div>
</div>
</div>
</div>
</div>
</section>
The dropdown and tabs both display, I don't know why the styles aren't picking up. May be the media queries. But the functionality works. When you click on the tab, you see the 2 div's that are getting display below the dropdown. I want to achieve the same thing when I click the dropdown value. Any help is appreciated.
You are complicating your code too much, do like below:-
function testFunction(evt, tabNumber) {
$('.tabcontent').hide();
$("#"+tabNumber).show();
}
Working example:-
function testFunction(evt, tabNumber) {
$('.tabcontent').hide();
$("#"+tabNumber).show();
}
$(document).ready(function() {
$('.dropdown > ul').toggleClass('no-js js');
$('.dropdown .js ul').hide();
$('.dropdown .js').click(function(e) {
$('.dropdown .js ul').slideToggle(200);
$('.dropbtn').toggleClass('active');
e.stopPropagation();
e.stopPropagation();
});
if ($('.dropdown .js ul').is(':visible')) {
$('.dropdown .js ul', this).slideUp();
$('.dropbtn').removeClass('active');
}
$("#filter-options-ul li").on("click", function() {
console.log('clicked');
var val = $(this).find('span').html();
//$('.filter-options').css('border-right', '20px solid' + col);
$('.dropbtn').html(val);
});
});
#media all and (min-width:320px) and (max-width:767px) {
.c-koh-tabbed-article .koh-article-header {
border-bottom: none;
}
.dropdown {
position: relative;
display: block;
margin-top: 30px;
margin-bottom: 30px;
}
.dropbtn {
background-color: #fff;
font-family: Helvetica Neue LT Pro Roman;
font-size: 14px;
color: #000;
width: 100%;
padding: 15px;
text-align: left;
border: 1px solid #e5e5e5;
cursor: pointer;
}
.dropbtn::after {
content: "\e600";
font-family: KohlerIcons;
font-size: 12px;
width: 16px;
height: 16px;
float: right;
margin-top: 5px;
box-sizing: border-box;
}
.dropdown ul {
position: relative;
padding-left: 0px;
font-weight: 400;
margin-bottom: 0;
font-size: 14px
}
.dropdown ul li {
position: relative;
list-style: none;
cursor: pointer;
}
.dropdown ul li ul {
position: absolute;
left: 0;
right: 0;
z-index: 9999;
}
.dropdown ul li ul {
padding-left: 0px;
}
.dropdown ul li li span {
font-family: Helvetica Neue LT Pro Roman;
font-size: 14px;
color: #000;
transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
display: block;
background: #fff;
padding: 20px 15px;
border: 1px solid #e5e5e5;
}
/* Fallbacks */
.dropdown .no-js ul {
display: none;
}
}
#media all and (min-width:768px) {
.dropdown {
display: none;
}
.c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set {
display: table;
border: none;
box-shadow: none;
}
.c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set li {
display: table-cell;
border-bottom: none;
}
.button-default {
font-family: Nexa W01 Heavy !important;
font-size: 14px !important;
color: #77777A !important;
display: inline !important;
width: 100% !important;
padding: 0px 20px !important;
height: 45px !important;
margin: 0 !important;
background: #FFF !important;
border: 1px solid #77777A !important;
color: #77777A !important;
border-radius: 0px !important;
text-transform: uppercase !important;
}
.button-default:hover {
background: #77777A !important;
color: #FFF !important;
}
.button-default.active {
background: #77777A !important;
color: #FFF !important;
}
.tabcontent {
margin: 30px 0px;
text-align: left;
width: 100%;
overflow: hidden;
}
}
.c-koh-tabbed-article .koh-article-header .koh-article-title {
font-family: Nexa W01 Heavy !important;
font-size: 30px !important;
color: #000 !important;
font-weight: bold !important;
}
.c-koh-tabbed-article .koh-article-header .koh-article-controls {
height: auto !important;
}
.strong {
font-family: Nexa W01 XBold !important;
font-size: 18px !important;
color: #000 !important;
}
.article-sub-text {
font-family: Helvetica Neue LT Pro Roman !important;
font-size: 14px !important;
color: #000 !important;
font-weight: 400 !important;
}
.left-column {
width: 50%;
float: left;
padding-right: 20px;
}
.right-column {
width: 50%;
float: left;
}
.right-column img {
display: block;
width: 100%;
height: auto;
}
#media all and (min-width:980px) {
.tabcontent {
margin: 30px 0px 30px 10px;
text-align: left;
width: 100%;
overflow: hidden;
}
.button-default {
font-family: Nexa W01 Heavy !important;
font-size: 14px !important;
color: #77777A !important;
display: inline !important;
width: auto !important;
padding: 0px 45px !important;
height: 45px !important;
margin: 0px 20px 0px 0px !important;
background: #FFF !important;
border: 1px solid #77777A !important;
color: #77777A !important;
border-radius: 0px !important;
text-transform: uppercase !important;
}
.button-default:last-child {
margin: 0px !important;
}
.button-default:hover {
background: #77777A !important;
color: #FFF !important;
}
.button-default.active {
background: #77777A !important;
color: #FFF !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="c-koh-tabbed-article">
<div class="koh-article-container">
<div class="koh-article-header">
<div class="koh-article-controls">
<ul class="koh-article-set">
<li><button onclick="testFunction(event,'tab1')" class="button-default tablinks">Blandit</button></li>
<li><button onclick="testFunction(event,'tab2')" class="button-default tablinks" href="javascript:void(0);">Aliquam</button></li>
<li><button onclick="testFunction(event,'tab3')" class="button-default tablinks" href="javascript:void(0);">Pharetra Maximus</button></li>
<li><button onclick="testFunction(event,'tab4')" class="button-default tablinks" href="javascript:void(0);">Tincidunt</button></li>
<li><button onclick="testFunction(event,'tab5')" class="button-default tablinks" href="javascript:void(0);">Condimentum</button></li>
</ul>
<div class="dropdown">
<ul class="no-js">
<li>
<button id="filter-options" class="dropbtn">Select One</button>
<ul id="filter-options-ul">
<li><span>Blandit</span></li>
<li><span>Aliquam</span></li>
<li><span>Pharetra Maximus</span></li>
<li><span>Tincidunt</span></li>
<li><span>Condimentum</span></li>
</ul>
</li>
</ul>
</div>
<div id="tab1" class="tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab65695_1800x800?$1800Hero$" alt="Kohler Image"></img>
</div>
</div>
<div id="tab2" class="container tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/aab27241_1800x800" alt="Kohler Image"></img>
</div>
</div>
<div id="tab3" class="tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab80843_rgb?crop=(102,1521,4876,2167)$" alt="Kohler Image"></img>
</div>
</div>
<div id="tab4" class="tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://s3.img-b.com/image/private/t_base,f_auto,c_lpad,h_800/product/Kohler/kohler-k-6331-alternate-image-4-473.jpg" alt="Kohler Image"></img>
</div>
</div>
<div id="tab5" class="tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab42000_1800x800?$1800Hero$" alt="Kohler Image"></img>
</div>
</div>
</div>
</div>
</div>
</section>
Note:- the same code you can use when you are on desktop view (Tabs VIEW)
you only need to use the click function like so:
$("#filter-options-ul li").on("click", function(ev) { //notice the ev parameter
console.log('clicked');
var val = $(this).find('span').html();
switch(val){
case 'Blandit':
testFunction(ev, 'tab1'); // pass the event to the click function
break;
case 'Aliquam':
testFunction(ev, 'tab2');
break;
case 'Pharetra Maximus':
testFunction(ev, 'tab3');
break;
case 'Tincidunt':
testFunction(ev, 'tab4');
break;
case 'Condimentum':
testFunction(ev, 'tab5');
break;
}
//$('.filter-options').css('border-right', '20px solid' + col);
$('.dropbtn').html(val);
});
here is a demo
function testFunction(evt, tabNumber) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabNumber).style.display = "block";
evt.currentTarget.className += " active";
}
$(document).ready(function() {
$('.dropdown > ul').toggleClass('no-js js');
$('.dropdown .js ul').hide();
$('.dropdown .js').click(function(e) {
$('.dropdown .js ul').slideToggle(200);
$('.dropbtn').toggleClass('active');
e.stopPropagation();
e.stopPropagation();
});
if ($('.dropdown .js ul').is(':visible')) {
$('.dropdown .js ul', this).slideUp();
$('.dropbtn').removeClass('active');
}
$("#filter-options-ul li").on("click", function(ev) {
console.log('clicked');
var val = $(this).find('span').html();
//console.log(ev);
//return;
switch(val){
case 'Blandit':
testFunction(ev, 'tab1');
break;
case 'Aliquam':
testFunction(ev, 'tab2');
break;
case 'Pharetra Maximus':
testFunction(ev, 'tab3');
break;
case 'Tincidunt':
testFunction(ev, 'tab4');
break;
case 'Condimentum':
testFunction(ev, 'tab5');
break;
}
//$('.filter-options').css('border-right', '20px solid' + col);
$('.dropbtn').html(val);
});
});
#media all and (min-width:320px) and (max-width:767px) {
.c-koh-tabbed-article .koh-article-header {
border-bottom: none;
}
.dropdown {
position: relative;
display: block;
margin-top: 30px;
margin-bottom: 30px;
}
.dropbtn {
background-color: #fff;
font-family: Helvetica Neue LT Pro Roman;
font-size: 14px;
color: #000;
width: 100%;
padding: 15px;
text-align: left;
border: 1px solid #e5e5e5;
cursor: pointer;
}
.dropbtn::after {
content: "\e600";
font-family: KohlerIcons;
font-size: 12px;
width: 16px;
height: 16px;
float: right;
margin-top: 5px;
box-sizing: border-box;
}
.dropdown ul {
position: relative;
padding-left: 0px;
font-weight: 400;
margin-bottom: 0;
font-size: 14px
}
.dropdown ul li {
position: relative;
list-style: none;
cursor: pointer;
}
.dropdown ul li ul {
position: absolute;
left: 0;
right: 0;
z-index: 9999;
}
.dropdown ul li ul {
padding-left: 0px;
}
.dropdown ul li li span {
font-family: Helvetica Neue LT Pro Roman;
font-size: 14px;
color: #000;
transition: background-color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out;
display: block;
background: #fff;
padding: 20px 15px;
border: 1px solid #e5e5e5;
}
/* Fallbacks */
.dropdown .no-js ul {
display: none;
}
}
#media all and (min-width:768px) {
.dropdown {
display: none;
}
.c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set {
display: table;
border: none;
box-shadow: none;
}
.c-koh-tabbed-article .koh-article-header .koh-article-controls .koh-article-set li {
display: table-cell;
border-bottom: none;
}
.button-default {
font-family: Nexa W01 Heavy !important;
font-size: 14px !important;
color: #77777A !important;
display: inline !important;
width: 100% !important;
padding: 0px 20px !important;
height: 45px !important;
margin: 0 !important;
background: #FFF !important;
border: 1px solid #77777A !important;
color: #77777A !important;
border-radius: 0px !important;
text-transform: uppercase !important;
}
.button-default:hover {
background: #77777A !important;
color: #FFF !important;
}
.button-default.active {
background: #77777A !important;
color: #FFF !important;
}
.tabcontent {
margin: 30px 0px;
text-align: left;
width: 100%;
overflow: hidden;
}
}
.c-koh-tabbed-article .koh-article-header .koh-article-title {
font-family: Nexa W01 Heavy !important;
font-size: 30px !important;
color: #000 !important;
font-weight: bold !important;
}
.c-koh-tabbed-article .koh-article-header .koh-article-controls {
height: auto !important;
}
.strong {
font-family: Nexa W01 XBold !important;
font-size: 18px !important;
color: #000 !important;
}
.article-sub-text {
font-family: Helvetica Neue LT Pro Roman !important;
font-size: 14px !important;
color: #000 !important;
font-weight: 400 !important;
}
.left-column {
width: 50%;
float: left;
padding-right: 20px;
}
.right-column {
width: 50%;
float: left;
}
.right-column img {
display: block;
width: 100%;
height: auto;
}
#media all and (min-width:980px) {
.tabcontent {
margin: 30px 0px 30px 10px;
text-align: left;
width: 100%;
overflow: hidden;
}
.button-default {
font-family: Nexa W01 Heavy !important;
font-size: 14px !important;
color: #77777A !important;
display: inline !important;
width: auto !important;
padding: 0px 45px !important;
height: 45px !important;
margin: 0px 20px 0px 0px !important;
background: #FFF !important;
border: 1px solid #77777A !important;
color: #77777A !important;
border-radius: 0px !important;
text-transform: uppercase !important;
}
.button-default:last-child {
margin: 0px !important;
}
.button-default:hover {
background: #77777A !important;
color: #FFF !important;
}
.button-default.active {
background: #77777A !important;
color: #FFF !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section class="c-koh-tabbed-article">
<div class="koh-article-container">
<div class="koh-article-header">
<div class="koh-article-controls">
<ul class="koh-article-set">
<li><button onclick="testFunction(event,'tab1')" class="button-default tablinks">Blandit</button></li>
<li><button onclick="testFunction(event,'tab2')" class="button-default tablinks" href="javascript:void(0);">Aliquam</button></li>
<li><button onclick="testFunction(event,'tab3')" class="button-default tablinks" href="javascript:void(0);">Pharetra Maximus</button></li>
<li><button onclick="testFunction(event,'tab4')" class="button-default tablinks" href="javascript:void(0);">Tincidunt</button></li>
<li><button onclick="testFunction(event,'tab5')" class="button-default tablinks" href="javascript:void(0);">Condimentum</button></li>
</ul>
<div class="dropdown">
<ul class="no-js">
<li>
<button id="filter-options" class="dropbtn">Select One</button>
<ul id="filter-options-ul">
<li><span>Blandit</span></li>
<li><span>Aliquam</span></li>
<li><span>Pharetra Maximus</span></li>
<li><span>Tincidunt</span></li>
<li><span>Condimentum</span></li>
</ul>
</li>
</ul>
</div>
<div id="tab1" class="tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab65695_1800x800?$1800Hero$" alt="Kohler Image"></img>
</div>
</div>
<div id="tab2" class="container tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/aab27241_1800x800" alt="Kohler Image"></img>
</div>
</div>
<div id="tab3" class="tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab80843_rgb?crop=(102,1521,4876,2167)$" alt="Kohler Image"></img>
</div>
</div>
<div id="tab4" class="tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://s3.img-b.com/image/private/t_base,f_auto,c_lpad,h_800/product/Kohler/kohler-k-6331-alternate-image-4-473.jpg" alt="Kohler Image"></img>
</div>
</div>
<div id="tab5" class="tabcontent" style="display:none;">
<div class="left-column">
<span class="strong"> This is the heading of the tabbed component and will be in bold</span>
<p class="article-sub-text">Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps
to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero.</p>
<p class="article-sub-text">Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually
has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly to mimic the typographic appearence of European languages, as are digraphs not to be found
in the original.</p>
</div>
<div class="right-column"><img src="https://kohler.scene7.com/is/image/PAWEB/zab42000_1800x800?$1800Hero$" alt="Kohler Image"></img>
</div>
</div>
</div>
</div>
</div>
</section>
Well you can also use onclick event on span element inside your dropdown to achieve the same result for Mobile view.
<ul id="filter-options-ul">
<li><span onclick="testFunction(event,'tab1')>Aliquam</span></li>
. . .
</ul>