Script for tabs with progress bar

Script for tabs with progress bar - javascript

I wrote some script for fancy tabs with progress bar.
It is works but I got a problem: I use delay to make progress bar running and when you click to 1 then 3, 4 or any other tab and the back to 1 - got problems: progress bar breaks and leaves coloured parts.
var numberold = -1;
function check(number) {
var name = "year" + number;
var nameold = "year" + numberold;
var nametab = "tab" + number;
var nametabold = "tab" + numberold;
var circlename = "circle" + number;
var circlenameold = "circle" + numberold;
if (numberold === -1) {
numberold = number;
} else {
//if (numberold != number) {
document.getElementById(nameold).style.color = '#D7D7D7';
document.getElementById(nametabold).style.visibility = 'hidden';
document.getElementById(nametabold).style.opacity = '0';
// if new tab later then old
if (number > numberold) {
var u = numberold;
var i = numberold;
(function() {
if (i < number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '100%';
setTimeout(arguments.callee, 300);
i++;
}
})();
(function() {
if (u <= number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#DBA741';
setTimeout(arguments.callee, 300);
u++;
}
})();
}
// if new tab earlier then old
else {
var u = numberold;
var i = numberold-1;
(function() {
if (i >= number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '0%';
setTimeout(arguments.callee, 300);
i--;
}
})();
(function() {
if (u > number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#D7D7D7';
setTimeout(arguments.callee, 300);
u--;
}
})();
//}
}
}
// style the active tab
document.getElementById(circlename).style.backgroundColor = '#DBA741';
document.getElementById(name).style.color = '#DBA741';
document.getElementById(nametab).style.visibility = 'visible';
document.getElementById(nametab).style.opacity = '1';
numberold = number;
}
check(0);
.year {
color: #D7D7D7;
width: 14.28%;
float: left;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}
.years {
margin-left: 10px;
color: #D7D7D7;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
user-select: none;
}
.step {
width: 14.28%;
float: left;
position: relative;
}
.line {
height: 5px;
background-color: #D7D7D7;
width: 100%;
margin-left: 50%;
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.line-done {
width: 0%;
height: 100%;
background-color: #DBA741;
-webkit-transition: width .3s ease;
-o-transition: width .3s ease;
transition: width .3s ease;
}
.circle-base {
width: 10px;
height: 10px;
position: absolute;
bottom: -3%;
left: 50%;
background-color: #D7D7D7;
border-radius: 100%;
}
.column {
width: 20%;
float: left;
padding: 5px;
}
.block {
box-shadow: 0px 1px 5px 1px #D7D7D7;
padding: 5px;
}
.title {
color: #DBA741;
}
.tab-base {
position: absolute;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
.progress-body {
height: 5px;
width: 88%;
margin: 10px auto;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.col-xs-12 {
width: 100%;
float:left;
}
}
<div class="col-xs-10 col-xs-offset-1 text-center hidden-xs hidden-sm">
<div class="row">
<div class="col-xs-12" style="padding-bottom: 20px;">
<div class="row">
<div class="step">
<div class="years" onclick="check(0)" id="year0">
1964 - 1971
</div>
<div id="circle0" class="circle-base"></div>
<div class="line">
<div id="line0" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(1)" id="year1">
1964 - 1971
</div>
<div id="circle1" class="circle-base"></div>
<div class="line">
<div id="line1" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(2)" id="year2">
1964 - 1971
</div>
<div id="circle2" class="circle-base"></div>
<div class="line">
<div id="line2" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(3)" id="year3">
1964 - 1971
</div>
<div id="circle3" class="circle-base"></div>
<div class="line">
<div id="line3" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(4)" id="year4">
1964 - 1971
</div>
<div id="circle4" class="circle-base"></div>
<div class="line">
<div id="line4" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(5)" id="year5">
1964 - 1971
</div>
<div id="circle5" class="circle-base"></div>
<div class="line">
<div id="line5" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(6)" id="year6">
1964 - 1971
</div>
<div id="circle6" class="circle-base" style="bottom: -12%;"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div id="tab0" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab1" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab4" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab5" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab6" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can try this
Now I am tired and dont know how to fix this.
I need a idea how to change algorithm or find unique solution for this.
Can somebody help?

You need to prevent any animation until the previous animation is done.
I added two vars finished1 & finished2 which will be true only when all animations are done
And if the function check(number) is activated while they are false .. the function must wait till they become true
Just like a traffic signal ;)
See the edited JavaScript
var numberold = -1;
var finished1 = true;
var finished2 = true;
function check(number) {
if(!finished1 || !finished2) {
window.setTimeout(function(){ check(number) }, 100);
return;
}
var name = "year" + number;
var nameold = "year" + numberold;
var nametab = "tab" + number;
var nametabold = "tab" + numberold;
var circlename = "circle" + number;
var circlenameold = "circle" + numberold;
if (numberold === -1) {
numberold = number;
} else {
finished1 = false;
finished2 = false;
//if (numberold != number) {
document.getElementById(nameold).style.color = '#D7D7D7';
document.getElementById(nametabold).style.visibility = 'hidden';
document.getElementById(nametabold).style.opacity = '0';
// if new tab later then old
if (number > numberold) {
var u = numberold;
var i = numberold;
(function() {
if (i < number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '100%';
setTimeout(arguments.callee, 300);
i++;
} else {
finished1 = true;
}
})();
(function() {
if (u <= number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#DBA741';
setTimeout(arguments.callee, 300);
u++;
} else {
finished2 = true;
}
})();
}
// if new tab earlier then old
else {
var u = numberold;
var i = numberold-1;
(function() {
if (i >= number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '0%';
setTimeout(arguments.callee, 300);
i--;
} else {
finished1 = true;
}
})();
(function() {
if (u > number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#D7D7D7';
setTimeout(arguments.callee, 300);
u--;
} else {
finished2 = true;
}
})();
//}
}
}
// style the active tab
document.getElementById(circlename).style.backgroundColor = '#DBA741';
document.getElementById(name).style.color = '#DBA741';
document.getElementById(nametab).style.visibility = 'visible';
document.getElementById(nametab).style.opacity = '1';
numberold = number;
}
check(0);
.year {
color: #D7D7D7;
width: 14.28%;
float: left;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}
.years {
margin-left: 10px;
color: #D7D7D7;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
user-select: none;
}
.step {
width: 14.28%;
float: left;
position: relative;
}
.line {
height: 5px;
background-color: #D7D7D7;
width: 100%;
margin-left: 50%;
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.line-done {
width: 0%;
height: 100%;
background-color: #DBA741;
-webkit-transition: width .3s ease;
-o-transition: width .3s ease;
transition: width .3s ease;
}
.circle-base {
width: 10px;
height: 10px;
position: absolute;
bottom: -3%;
left: 50%;
background-color: #D7D7D7;
border-radius: 100%;
}
.column {
width: 20%;
float: left;
padding: 5px;
}
.block {
box-shadow: 0px 1px 5px 1px #D7D7D7;
padding: 5px;
}
.title {
color: #DBA741;
}
.tab-base {
position: absolute;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
.progress-body {
height: 5px;
width: 88%;
margin: 10px auto;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.col-xs-12 {
width: 100%;
float:left;
}
}
<div class="col-xs-10 col-xs-offset-1 text-center hidden-xs hidden-sm">
<div class="row">
<div class="col-xs-12" style="padding-bottom: 20px;">
<div class="row">
<div class="step">
<div class="years" onclick="check(0)" id="year0">
1964 - 1971
</div>
<div id="circle0" class="circle-base"></div>
<div class="line">
<div id="line0" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(1)" id="year1">
1964 - 1971
</div>
<div id="circle1" class="circle-base"></div>
<div class="line">
<div id="line1" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(2)" id="year2">
1964 - 1971
</div>
<div id="circle2" class="circle-base"></div>
<div class="line">
<div id="line2" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(3)" id="year3">
1964 - 1971
</div>
<div id="circle3" class="circle-base"></div>
<div class="line">
<div id="line3" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(4)" id="year4">
1964 - 1971
</div>
<div id="circle4" class="circle-base"></div>
<div class="line">
<div id="line4" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(5)" id="year5">
1964 - 1971
</div>
<div id="circle5" class="circle-base"></div>
<div class="line">
<div id="line5" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(6)" id="year6">
1964 - 1971
</div>
<div id="circle6" class="circle-base" style="bottom: -12%;"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div id="tab0" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab1" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab4" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab5" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab6" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Related

How to show div data by on click event on selector using jQuery

I am new to jQuery and confused about simple logic and need your help to sort the mess. I am using HTML, CSS, jQuery to display some data by on click the jQuery event on selector '.class'.
I have successfully opened the data for the first time for a single div panel. But if I used the same HTML twice then both of the panels display data at the same. Below is the code
jQuery(document).ready(function() {
jQuery(".flip").click(function () {
jQuery(this).siblings(".panel").slideToggle("slow");
});
});
.panel, .flip {
padding: 30px;
text-align: center;
background-color: transparent;
font-weight: bold;
font-size: 28px;
}
.panel {
padding: 50px;
display: none;
}
.flip{
cursor:pointer;
}
.cards-header.flip {
background-color: #001c47;
color: #fff;
margin-bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- navigation end -->
<div class="heading-wrapper">
<h1>Ingredient of the Month</h1>
</div>
<div class="wrapper">
<div class="cards-header flip">
Year - 2022
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<div class="ingredient-month-wrapper">
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="" alt="Shea Butter" />
<div class="ingredient-month-wrapper">
<h2>January'22, Shea Butter</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-header flip">
Year - 2021
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-carrot-seed-oil.jpg" alt="Carrot Seed Oil" />
<div class="ingredient-month-wrapper">
<h2>December'21, Carrot Seed Oil</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-olive-oil.jpg" alt="Olive Oil" />
<div class="ingredient-month-wrapper">
<h2>November'21, Olive Oil</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lemon.jpg" alt="Lemon" />
<div class="ingredient-month-wrapper">
<h2>October'21, Lemon</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lycopene.jpg" alt="Lycopene" />
<div class="ingredient-month-wrapper">
<h2>September'21, Lycopene</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-peach.jpg" alt="Peach" />
<div class="ingredient-month-wrapper">
<h2>August'21, Peach</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-cucumber.jpg" alt="Cucumber" />
<div class="ingredient-month-wrapper">
<h2>July'21, Cucumber</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-avocado.jpg" alt="Avocado" />
<div class="ingredient-month-wrapper">
<h2>June'21, Avocado</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-watermelon.jpg" alt="Watermelon" />
<div class="ingredient-month-wrapper">
<h2>May'21, Watermelon</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img class="img-fluid" src="./assets/img/Carousel-cofee.jpg" alt="Coffee" /></a>
<div class="ingredient-month-wrapper">
<h2>April'21, Coffee</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-kakaduplum.jpg" alt="Kakadu Plum" />
<div class="ingredient-month-wrapper">
<h2>March'21, Kakadu Plum</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So I want to open one by one i.e. when someone clicks on the year 2021 then it will open its data and if someone clicks on 2022 then that year div data open.
How to achieve the same?

jQuery(document).ready(function() {
jQuery(".flip").click(function () {
jQuery(this).next(".panel").slideToggle("slow");
});
});
.panel, .flip {
padding: 30px;
text-align: center;
background-color: transparent;
font-weight: bold;
font-size: 28px;
}
.panel {
padding: 50px;
display: none;
}
.flip{
cursor:pointer;
}
.cards-header.flip {
background-color: #001c47;
color: #fff;
margin-bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- navigation end -->
<div class="heading-wrapper">
<h1>Ingredient of the Month</h1>
</div>
<div class="wrapper">
<div class="cards-header flip">
Year - 2022
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<div class="ingredient-month-wrapper">
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="" alt="Shea Butter" />
<div class="ingredient-month-wrapper">
<h2>January'22, Shea Butter</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-header flip">
Year - 2021
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-carrot-seed-oil.jpg" alt="Carrot Seed Oil" />
<div class="ingredient-month-wrapper">
<h2>December'21, Carrot Seed Oil</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-olive-oil.jpg" alt="Olive Oil" />
<div class="ingredient-month-wrapper">
<h2>November'21, Olive Oil</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lemon.jpg" alt="Lemon" />
<div class="ingredient-month-wrapper">
<h2>October'21, Lemon</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-lycopene.jpg" alt="Lycopene" />
<div class="ingredient-month-wrapper">
<h2>September'21, Lycopene</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-peach.jpg" alt="Peach" />
<div class="ingredient-month-wrapper">
<h2>August'21, Peach</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-cucumber.jpg" alt="Cucumber" />
<div class="ingredient-month-wrapper">
<h2>July'21, Cucumber</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-avocado.jpg" alt="Avocado" />
<div class="ingredient-month-wrapper">
<h2>June'21, Avocado</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-watermelon.jpg" alt="Watermelon" />
<div class="ingredient-month-wrapper">
<h2>May'21, Watermelon</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img class="img-fluid" src="./assets/img/Carousel-cofee.jpg" alt="Coffee" /></a>
<div class="ingredient-month-wrapper">
<h2>April'21, Coffee</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<img class="img-fluid" src="./assets/img/Carousel-kakaduplum.jpg" alt="Kakadu Plum" />
<div class="ingredient-month-wrapper">
<h2>March'21, Kakadu Plum</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Use next instead of siblings
JQuery(document).ready(function() {
JQuery(".flip").click(function () {
JQuery(this).next(".panel").slideToggle("slow");
});
});
Working codepen. https://codepen.io/rvtech/pen/zYEWxqR

$(".flip").click(function(e) {
$(this).next().slideToggle()
})
https://codepen.io/hardik9193/pen/yLzKNEZ

Align div to bottom of Bootstrap4 card-body

I'm working with bootstraps cards. I have card-header and card-footer and they are working great. In the card-body I have a card-title. This title can take up 1 or 2 lines in the card-body. Also inside this card-body I have some information in a div. I want to align this informational div to the card-body bottom as I use row/col to align things nicely but because 1 card-title is 1 line and another is 2 lines when you look across cards in the page this additional information doesn't line up exactly between cards and bottom aligning would solve that I think.
So basically I want the orangered divs to line up at the bottom of their cards because then visually across cards they would look to line up.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>

I did a few things:
added position:absolute with some (24%) clearance from the bottom;
the container class implemented a width of 100%, which is why the box now went outside the boundary;
card-body class implemented a 20px padding
To get the exact styling, we removed the width 20px from the 100% width (from the cowntainer)
complete snippet below:
.box {
position: relative;
display: inline-block;
width: 340px;
height: 300px;
background-color: #fff;
border-radius: 5px;
}
.box:hover {
/*-webkit-transform: scale(1.10, 1.10);
transform: scale(1.10, 1.10);*/
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
}
.orangeRedClass {
position: absolute;
bottom: 24%;
width: calc(100% - 40px) !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="margin-top: 25px;">
<div class="row">
<div class="col">
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header Stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a 1 line title</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2019
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2019
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
52
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff
</div>
</div>
</div>
<div class="box" style="margin-right: 30px; margin-bottom: 30px;">
<div class="card" style="width: 100%; height: 100%;">
<!-- CARD HEADER -->
<div class="card-header" style="margin: 0px;">
Header stuff
</div>
<!-- CARD BODY -->
<div class="card-body" style="cursor: pointer;">
<div class="row">
<div class="col">
<h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6>
</div>
</div>
<!--<div class="d-flex align-items-center">-->
<div class="container orangeRedClass" style="background-color: orangered">
<div class="row">
<div class="col-4">
Starts On:
</div>
<div class="col">
1/1/2020
</div>
</div>
<div class="row">
<div class="col-4">
Ends On:
</div>
<div class="col">
12/31/2020
</div>
</div>
<div class="row">
<div class="col-4">
#:
</div>
<div class="col">
10
</div>
</div>
</div>
<!--</div>-->
</div>
<!-- CARD FOOTER -->
<div class="card-footer">
Footer stuff here
</div>
</div>
</div>
</div>
</div>
</div>

Multiple div height columns on row using JQuery

What approach can I take when I want to include multiple classes within a JQuery same height script?
I currently have four different divs classed as '.row-16' and it works perfectly, but how can I add more groups to this specific script?
I want to include .row-1 .row-2 etc..
Sorry for the confusion, but this is ultimately what I'm trying to achieve.
.row-1 has four columns that will all be the same height size depending on highest.
.row-2 will be separate from row-1 and will have it's own equal height columns.
Updated JSFiddle: http://jsfiddle.net/fLr9th4y/3/ - Working example on Row-11
Here is the code:
$(document).ready(function(){
$('.container').each(function(){
var highestBox = 0;
$(this).find('.row-16').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
})
$(this).find('.row-16').height(highestBox);
});
});
The above script currently aligns all four of my columns with the correct height, I just want to add more class groups.

Why not adding a new class, specifically for the elements that should have their height changed and target that? BTW, here is a similar script that I used a couple of years ago for such occasions.
(function ($, window, document, undefined) {
/**
* Equalize the height of the given items.
* #type {*|jQuery}
* #return mixed
* #param options
* Example: $('.item1, .item2').equalHeight({ container: '.container' });
*/
$.fn.equalHeight = function (options) {
var items, settings;
items = this;
settings = $.extend({
container: ''
}, options);
if (settings.container) {
// If a container is set, apply setHeight() for all containers.
$(settings.container).each(function () {
var thisC = $(this),
getItems = [];
$.each(items, function (index, value) {
getItems.push(thisC.find(value));
});
return setHeight(getItems);
});
} else {
// Otherwise we assume that the items exist only once in a page
// and we apply setHeight() to their first (and unique) instance.
return setHeight(this);
}
// Set the height of all items equal to the highest item.
function setHeight(getItems) {
var itemsH = [];
$(getItems).each(function () {
itemsH.push($(this).outerHeight());
});
var maxH = Math.max.apply(Math, itemsH);
$(getItems).each(function () {
return $(this).css('height', maxH);
});
}
}
})(jQuery, window, document);
(Demo)
Of course, I don't need it anymore, thanks to flexbox.

This should select each class that starts with "row", then get each unique one and then get the max height for each class and set all those to the max of the largest.
Per the question update, using the question and fiddle for possible answer using a given "row-" begins with, which does not seem to be in the fiddle but is in the question.
var myselector = 'row-';
function getRowMax(row) {
var heights = $(row).map(function() {
return $(this).height();
}).get();
var maxHeight = Math.max.apply(null, heights);
return maxHeight;
}
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
function getrow(value, index, self) {
return value.startsWith(myselector);
}
$(function() {
var rows = $('.container').find("[class^='" + myselector + "']");
var classListAll = [];
rows.each(function(item) {
var classes = item.attr('class').split(/\s+/);
classListAll.concat(classes);
});
// var classListAll = rows.attr('class').split(/\s+/);
var classList = classListAll.filter(onlyUnique).filter(getrow);
$.each(classList, function(index, item) {
var sel = '.' + item;
var m = getRowMax(sel);
$(sel).height(m);
});
});
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4,
h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77, 72, 69, 0.2), 0 6px 10px rgba(77, 72, 69, 0.15);
}
.row>.col-md-12>span {
font-size: smaller;
}
.col-md-4>.row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-3>.row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev,
.slick-next {
background: black!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
/* ----- */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
</span>
</div>
<div class="col-md-2 col-md-2 text-center py-2 heading">
<img src="" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="row r1">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Client</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Integrated Strategy and Account Management</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Creativity and Innovation</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Talent</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Manage Full Talent LifeCycle</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Professional Development/Developing and Empowering</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Self-Leadership</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Business Development and Growth</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Strategy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Prospecting</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Pitch Preparation, Participation and Leadership</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Organic Growth</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Finance and Operations</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST TEST TEST</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Staffing and Resource Planning</span>
</div>
</div>
</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(function() {
$(".regular").slick({
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
});
});
</script>
</body>

Easy:
$(document).ready(function() {
$('.container').each(function() {
var highestBox16 = 0;
var highestBox1 = 0;
var highestBox2 = 0;
var highestBox3 = 0;
//var highestBox..
$(this).find('.row-16,.row-1,.row-2,.row-3').each(function() {
if($(this).hasClass('row-16')){
if ($(this).height() > highestBox16) {
highestBox16 = $(this).height();
}
}
if($(this).hasClass('row-1')){
if ($(this).height() > highestBox1) {
highestBox1 = $(this).height();
}
}
if($(this).hasClass('row-2')){
if ($(this).height() > highestBox2) {
highestBox2 = $(this).height();
}
}
if($(this).hasClass('row-3')){
if ($(this).height() > highestBox3) {
highestBox3 = $(this).height();
}
}
})
$('.row-16,.row-1,.row-2,.row-3').height(highestBox);
});
});

Two column three image combination layout

I'm just trying to make fluid responsive layout through <img src="" alt="" /> tags but I made it through background image.
Is there any way to make this layout with img tag ?
XD Example
Front End Code
html,
body {
height: 100%;
width: 100%;
}
.cmd-three-img-container {
margin-bottom: 30px;
height: 250px;
display: flex;
}
.cmd-main-img {
position: relative;
width: 50%;
height: 100%;
margin-left: 5px;
background: url(https://i.imgur.com/9Q9pgmR.jpg);
background-size: cover;
background-position: center;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.cmd-img-stacked {
width: 50%;
height: 100%;
}
.cmd-img-overlay {
padding-right: 10px;
padding-top: 10px;
}
.cmd-img-overlay h4 {
float: right;
font-size: 18px;
color: #fff;
}
.cmd-top-img,
.cmd-bottom-img {
width: 100%;
height: calc(50% - 2.5px);
}
.cmd-top-img {
background: url(https://i.imgur.com/9Q9pgmR.jpg);
background-size: cover;
background-position: center;
border-top-left-radius: 4px;
}
.cmd-bottom-img {
background: url(https://i.imgur.com/hxiPgcK.jpg);
background-size: cover;
background-position: center;
border-bottom-left-radius: 4px;
}
.cmd-top-img {
margin-bottom: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="cmd-three-img-container">
<!-- top level image container START-->
<div class="cmd-img-stacked">
<!--stacked img container -->
<div class="cmd-top-img">
</div>
<div class="cmd-bottom-img">
</div>
</div>
<div class="cmd-main-img">
<!--Main image -->
<div class="cmd-img-overlay">
<!--overlay div -->
<h4>Office</h4>
</div>
</div>
</div>
</div>
</div>
</div>

You just split the child column within the parent column and add the bootstrap 4 default class d-flex align-items-stretch h-100 stretch the image until column end. set border-radis for corners separately as per your requirement. I hope this example you will find the solution.
.row.eqcol {
padding-right: 10px;
}
.row.eqcol div[class^="col-"] {
padding: 0;
padding-right: 5px;
}
.text-overlay h3 {
font-size: 20px;
color: #fff;
}
.text-overlay {
position: absolute;
font-size: 14px;
top: 5px;
right: 5px;
}
.cmd-three-img-container {
position: relative;
}
.cmd-three-img-container img {
object-fit: cover;
padding-bottom: 5px;
width: 100%;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container my-3">
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="row eqcol">
<div class="col-6">
<div class="cmd-three-img-container left-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
</div>
</div>
<div class="col-6">
<div class="cmd-three-img-container d-flex align-items-stretch h-100 right-col">
<img src="https://i.imgur.com/9Q9pgmR.jpg" class="img-fluid">
<div class="text-overlay">
<h3>Office</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Cut element - JQuery

Hello I work on create bootstrap testimonials using bootstrap carousel, so I Divided every item into 3 boxes and it's work well but the problem will be appear in responsive media screen that the section height will be not proper:
so my Idea is the JQuery code will check If the window width is less than 767px then will cut the .col-xs-12:eq(1) and append it after .item then wrap it in row Div then Wrap it in .item Div:
Here a simple example:
Before:
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
After: the code will check if the window width is less than 767px then will do this actions:
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4 moved">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4 moved">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
Here my snippet:
; (function ($) {
"use strict";
var $windowWidth = $(window).width();
if ($windowWidth < 767) {
$('#pencil-testimonials_2 .item').each(function (index, element) {
$(this).find(".col-xs-12:eq(1)").addClass('moved').appendTo($(this)).wrap('<div class = "row"> </div>').wrap('<div class = "item" > </div>');
$(this).find(".col-xs-12:eq(2)").addClass('moved').appendTo($(this)).wrap('<div class = "row"> </div>').wrap('<div class = "item" > </div>');
});
}
})(jQuery);
#pencil-testimonials_2 {
min-height: 375px;
padding: 50px 0;
position: relative;
background-color:aquamarine;
}
#pencil-testimonials_2 .carousel-indicators {
width: 100%;
height: auto;
position: absolute;
bottom: 20px;
left: 0;
margin: 0;
list-style: none;
text-align: center;
}
#pencil-testimonials_2 .carousel-indicators > li {
display: inline-block;
width: 14px;
height: 14px;
margin: 0;
margin-right: 3px;
border:1px solid #838383;
background-color:transparent;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#pencil-testimonials_2 .carousel-indicators > li.active {
width: 14px;
height: 14px;
background-color: #838383;
border: 1px solid transparent;
margin-right: 3px;
}
#pencil-testimonials_2 .text-image{
height:150px;
border:1px solid #ffffff;
margin: 0 0 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="pencil-testimonials_2" class="carousel slide" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_2" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="2">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="3">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="4">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="5">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of First Slide -->
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of Second Slide -->
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of Third Slide -->
</div>
</div>
</div>

Here's what you can do:
.carousel.slide {
min-height: 375px;
padding: 50px 0;
position: relative;
background-color:aquamarine;
}
.carousel.slide .carousel-indicators {
width: 100%;
height: auto;
position: absolute;
bottom: 20px;
left: 0;
margin: 0;
list-style: none;
text-align: center;
}
.carousel.slide .carousel-indicators > li {
display: inline-block;
width: 14px;
height: 14px;
margin: 0;
margin-right: 3px;
border:1px solid #838383;
background-color:transparent;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.carousel.slide .carousel-indicators > li.active {
width: 14px;
height: 14px;
background-color: #838383;
border: 1px solid transparent;
margin-right: 3px;
}
.carousel.slide .text-image{
height:150px;
border:1px solid #ffffff;
margin: 0 0 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="pencil-testimonials_1" class="carousel slide hidden-xs hidden-sm" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_1" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_1" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_1" data-slide-to="2">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 1
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 2
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 3
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 4
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 5
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 6
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 7
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 8
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pencil-testimonials_2" class="carousel slide hidden-md hidden-lg" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_2" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="2">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="3">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="4">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="5">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="6">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="7">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="8">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 1
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 2
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 3
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 4
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 5
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 6
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 7
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 8
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Basically, you just create two carousels and hide the one you don't want using Bootstrap's utility classes: hidden-xs, hidden-sm, hidden-md and hidden-lg. If you need more control, you can always create a third one for tablets.

Develop Reference

JavaScript is the programming language of the Web.

Script for tabs with progress bar - javascript

Related

How to show div data by on click event on selector using jQuery

Align div to bottom of Bootstrap4 card-body

Multiple div height columns on row using JQuery

Two column three image combination layout

Cut element - JQuery

Categories

Resources