//**** Navigate case steps ****
$(".step-window").each(function() {
$(this).addClass("not-visible");
});
$(".vertical-line").each(function() {
$(this).addClass("not-visible");
})
$(".step").each(function() {
let elementsToBeClicked = document.getElementsByClassName("step");
$(elementsToBeClicked).click(function() {
let clickedElement = $(this);
$(clickedElement).addClass("active-step");
$(clickedElement).find(".step-window").removeClass("not-visible");
$(clickedElement).find(".vertical-line").removeClass("not-visible");
$(elementsToBeClicked).not(clickedElement).removeClass("active-step");
$(elementsToBeClicked).not(clickedElement).find(".step-window").addClass("not-visible");
$(elementsToBeClicked).not(clickedElement).find(".vertical-line").addClass("not-visible");
});
});
.not-visible {
display: none !important;
}
/***** LEFT SIDE *****/
.left-column {
width: 20%;
float: left;
text-align: center;
}
.case-bar {
border-top: 1px solid #989898;
width: 80%;
float: left;
}
.case-bar:after {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #989898;
display: inline-block;
position: relative;
left: 50%;
}
.case-number {
font-size: 100px;
color: #989898;
}
/***** RIGHT SIDE *****/
.right-column {
width: 80%;
float: right;
}
/*Progress bar*/
.container {
width: 100%
}
.progress-bar {
counter-reset: step;
}
.progress-bar .step {
list-style-type: none;
float: left;
width: 10%;
position: relative;
text-align: center;
margin-top: 50px;
}
.progress-bar .step:last-of-type {
width: 50%;
}
.progress-bar .step:before {
content: counter(step);
counter-increment: step;
color: #fff;
width: 30px;
height: 30px;
line-height: 30px;
display: block;
text-align: center;
margin: 0 auto 20px auto;
border: 1px solid #989898;
border-radius: 50%;
background-color: #989898;
}
.progress-bar .step:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: #989898;
top: 15px;
left: -50%;
z-index: -1;
}
.progress-bar .step.active-step:before {
content: counter(step);
counter-increment: step;
width: 40px;
height: 40px;
line-height: 40px;
border: 1px solid #8DC63F;
display: block;
text-align: center;
margin: -5px auto 0 auto;
border-radius: 50%;
background-color: #8DC63F;
z-index: 1;
}
/*Bubble at the end of progress bar*/
.progress-bar .step:last-of-type:before {
content: "";
background-color: #989898;
width: 5px;
height: 5px;
border-radius: 50%;
margin: 13px auto 0px auto
}
.progress-bar li.active-step+li:after .progress-bar li.active-step+li {
background-color: #8DC63F;
}
/*Vertical line on progress bar*/
.vertical-line {
background-color: #989898;
width: 1px;
height: 100px;
transition: transform 1s linear;
transform-origin: top;
transform-style: preserve-3d;
position: absolute;
right: 50%;
z-index: -1;
}
.vertical-line:after {
content: "";
background-color: #989898;
width: 5px;
height: 5px;
border-radius: 50%;
display: inline-block;
position: absolute;
top: 100%;
right: -150%;
}
/***** Common to ALL cases *****/
hr {
background: none;
}
.case-study-paragraph {
font-size: small;
text-align: left;
margin: 0;
}
.col-1-5 {
width: 20%;
padding: 0 15px;
}
.col-2-5 {
width: 40%;
padding: 0 15px;
}
.col-3-5 {
width: 60%;
padding: 0 15px;
}
.col-4-5 {
width: 80%;
padding: 0 15px;
}
.col-5-5 {
width: 100%;
padding: 0 15px;
}
.step-window {
clear: both;
padding-top: 120px;
list-style-type: none;
display: flex;
width: 80vw;
position: relative;
}
.image-cropper {
overflow: hidden;
border-radius: 50%;
}
.box-coin {
display: block;
position: absolute;
width: 300px;
height: 300px;
right: 30%;
top: 60%;
}
<div class="page-container">
<div class="case-study-container">
<div>
<div class="left-column">
<div class="case-title">some text</div>
</div>
<div class="right-column">
<div class="container">
<ul class="progress-bar">
<li class="step">
<span class="vertical-line"></span>
<div class="step-window">
<p class="case-study-paragraph"><span class="emphasys">Herding</span> cats win-win-win for sacred cow, and strategic fit, yet back to the drawing-board, or closing these latest prospects is like putting socks on an octopus, nor it's not hard guys. Put your feelers out
hard stop. Out of scope. Criticality curate it's not hard guys window-licker, or highlights .</p>
</div>
</li>
<li class="step">
<span class="vertical-line"></span>
<div class="step-window">
<div>
<p class="case-study-paragraph"><span class="emphasys">Let's</span> unpack that later circle back circle back for clear blue water for market-facing, for goalposts or throughput. Low engagement going forward data-point. Baseline shelfware, nor design thinking. Draft
policy ppml proposal personal development are we in agreeance, or staff engagement get buy-in.</p>
</div>
</div>
</li>
<li class="step">
<span class="vertical-line"></span>
<div class="step-window">
<div>
<p class="case-study-paragraph"><span class="emphasys">Herding</span> cats win-win-win for sacred cow, and strategic fit, yet back to the drawing-board, or closing these latest prospects is like putting socks on an octopus, nor it's not hard guys.</p>
</div>
</div>
</li>
<li class="step">
<span class="vertical-line"></span>
<div class="step-window">
<p class="case-study-paragraph"><span class="emphasys">Herding</span> cats win-win-win for sacred cow, and strategic fit, yet back to the drawing-board, or closing these latest prospects is like putting socks on an octopus, nor it's not hard guys.</p>
</div>
</li>
<li class="step">
<span class="vertical-line"></span>
<div class="step-window">
<p class="case-study-paragraph"><span class="emphasys">Herding</span> cats win-win-win for sacred cow, and strategic fit, yet back to the drawing-board, or closing these latest prospects is like putting socks on an octopus, nor it's not hard guys.</p>
</div>
</li>
<li class="step">
</li>
</ul>
</div>
</div>
</div>
</div