Develop Reference

How to toggle the "parent" div when all "child" div are toggled (filtered as no result)?

I am making an instant search function using .filter() and .toggle().
It is basically working, but I would like to make the "search result" better by hiding the whole parent .char-section div section when there is no result inside (ie. no .item in the below example).
For example, when searching for banana, the script currently works like this:
https://i.stack.imgur.com/UMrbK.png
The desired result should look like this :
Here is the script:
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$(".item").filter(function () {
$(this).toggle(
$(":is(.title)", this)
.text()
.toLowerCase()
.includes(value.toLowerCase())
);
});
});
});
body {
margin: 30px;
}
form {
margin-bottom: 10px;
}
.title {
display: block;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 10px;
font-size: 17px;
line-height: 1.25em;
font-weight: 700;
}
.char {
position: absolute;
left: 0%;
top: 0%;
right: auto;
bottom: auto;
z-index: 3;
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
margin-left: 2px;
padding-top: 0px;
padding-bottom: 0px;
color: #036;
font-size: 26px;
line-height: 1em;
}
.item {
position: relative;
top: -20px;
width: 100%;
margin-top: 0px;
margin-bottom: 10px;
padding-top: 8px;
padding-bottom: 8px;
}
.list {
position: relative;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
padding: 2px 0px 2px 80px;
}
.char-section {
position: relative;
width: 100%;
height: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 30px 0px;
border-bottom: 3px solid #ddd;
}
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<form>
<input type="search" placeholder="Quick Search" class="h-filter-search" id="myInput">
<input type="reset" id="reset-btn" value="Reset">
</form>
<div class="ab-wrapper">
<div id="A" class="char-section">
<h5 class="char">A</h5>
<div class="list">
<div class="item">
<p class="title">Apple</p>
</div>
<div class="item">
<p class="title">Apple Juice</p>
</div>
<div class="item">
<p class="title">Avocado</p>
</div>
</div>
</div>
<div id="B" class="char-section">
<h3 class="char">B</h3>
<div class="list">
<div class="item">
<p class="title">Banana</p>
</div>
<div class="item">
<p class="title">Boiled Eggs</p>
</div>
<div class="item">
<p class="title">Bamboo Juice</p>
</div>
</div>
</div>
<div id="C" class="char-section">
<h3 class="char">C</h3>
<div class="list">
<div class="item">
<p class="title">Candy</p>
</div>
</div>
</div>
<div id="D" class="char-section">
<h3 class="char">D</h3>
<div class="list">
<div class="item">
<p class="title">Disco</p>
</div>
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
<div id="E" class="char-section">
<h3 class="char">E</h3>
<div class="list"></div>
</div>
<div id="F" class="char-section">
<h3 class="char">F</h3>
<div class="list">
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
</div>
On CodePen: https://codepen.io/pen/qBYbdYx
☝️ Edit: updated with the script in answer
Big thanks for any idea!
PS. Another small problem is that reset button can only reset the input field, but not reset the whole results list. The user must focus the input and hit "Esc" key. I will put this as another question later.

I have to disagree with another answer:
if (hit) {
$(this).closest(".char-section").show();
} else {
$(this).closest(".char-section").hide();
}
With this code, the "char-section" is going to be visible if and only if the last item of the section is. So the "A" section won't be visible if the search is on "Apple", for example.
My suggestion is 1/ hide all the "char-sections" 2/ show them in the same each/filter loop if one of their "item" children is visible, as follows:
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
// hide all the sections
$(".char-section").hide();
// 'each' better than 'filter' here, because there's no filtering
$(".item").each(function () {
if ($("p.title", this).text().toLowerCase().includes(value))
// shows the item AND its "char-section" parent
$(this).show().parents(".char-section").show();
else
// hides the item, leaves its parent alone
$(this).hide();
});
});
});
HTH

This can be done rather easily. If we look at your html structure, we realize that the main 'container' <div> for an item, is of class char-section. So if we're searching through your title DIVs, we can get a reference to it's parent using:
.closest(".char-section")
on the object in question.
Now all we have to do is hide or show the whole container using the equally named show()/hide() methods in case the search was successful or not.
Here's an example:
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".item").filter(function(e) {
let hit = $(":is(.title)", this).text().toLowerCase().includes(value.toLowerCase());
$(this).toggle(hit);
if (hit) {
$(this).closest(".char-section").show();
} else {
$(this).closest(".char-section").hide();
}
});
});
});
body {
margin: 30px;
}
form {
margin-bottom: 10px;
}
.title {
display: block;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 10px;
font-size: 17px;
line-height: 1.25em;
font-weight: 700;
}
.char {
position: absolute;
left: 0%;
top: 0%;
right: auto;
bottom: auto;
z-index: 3;
display: inline-block;
margin-top: 20px;
margin-bottom: 0px;
margin-left: 2px;
padding-top: 0px;
padding-bottom: 0px;
color: #036;
font-size: 26px;
line-height: 1em;
}
.item {
position: relative;
top: -20px;
width: 100%;
margin-top: 0px;
margin-bottom: 10px;
padding-top: 8px;
padding-bottom: 8px;
}
.list {
position: relative;
left: 0%;
top: 0%;
right: 0%;
bottom: auto;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
padding: 2px 0px 2px 80px;
}
.char-section {
position: relative;
width: 100%;
height: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 30px 0px;
border-bottom: 3px solid #ddd;
}
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<form>
<input type="search" placeholder="Quick Search" class="h-filter-search" id="myInput">
<input type="reset" id="reset-btn" value="Reset">
</form>
<div class="ab-wrapper">
<div id="A" class="char-section">
<h5 class="char">A</h5>
<div class="list">
<div class="item">
<p class="title">Apple</p>
</div>
<div class="item">
<p class="title">Apple Juice</p>
</div>
<div class="item">
<p class="title">Avocado</p>
</div>
</div>
</div>
<div id="B" class="char-section">
<h3 class="char">B</h3>
<div class="list">
<div class="item">
<p class="title">Banana</p>
</div>
<div class="item">
<p class="title">Boiled Eggs</p>
</div>
<div class="item">
<p class="title">Bamboo Juice</p>
</div>
</div>
</div>
<div id="C" class="char-section">
<h3 class="char">C</h3>
<div class="list">
<div class="item">
<p class="title">Candy</p>
</div>
</div>
</div>
<div id="D" class="char-section">
<h3 class="char">D</h3>
<div class="list">
<div class="item">
<p class="title">Disco</p>
</div>
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
<div id="E" class="char-section">
<h3 class="char">E</h3>
<div class="list"></div>
</div>
<div id="F" class="char-section">
<h3 class="char">F</h3>
<div class="list">
<div class="item">
<p class="title">Decaffeinated Juice</p>
</div>
</div>
</div>
</div>

How to add content to div

I have to set up a menu website for an assignment and want to make a floating side div for the order summary
Figma reference : https://images2.imgbox.com/59/9f/qikiR5qq_o.jpg
Note: This is the first class with any coding so I'm really new to this.
I have the div and grid set up but can't add the content without messing things up.
The buttons at the bottom are always either not at the bottom or too bottom that it passes the div. Is the problem the div or the content?
Is there a way to remove the item using the remove button? I guess that's javascript?
I copied the code here: https://jsfiddle.net/93bqypdu/1/
<div class="grid-container">
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
<div class="a">a</div><div class="a">a</div><div class="a">a</div>
</div>
<div class="side">
<img src="https://images2.imgbox.com/f6/96/uf0fayVE_o.png" width="150vh"
height="auto" class="pic">
<div class="content">Lorem Ipsum</div>
<div class="sbutt">
CANCEL
</div>
<div class="sbutt">
ORDER
</div>
</div>

If you are referring to the misaligned Order & Cancel buttons in your fiddle, we will need to add an additional div container for the buttons and assign additional classes to the buttons:
HTML
<div class="grid-container">
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
<div class="a">a</div>
</div>
<div class="side">
<img src="https://images2.imgbox.com/f6/96/uf0fayVE_o.png" width_="150vh" height="auto" class="pic">
<div class="content">Lorem Ipsum</div>
<div class="sbutt-container">
<div class="sbutt cancel" onclick="window.location.href = 'Hiveworks.html';">
CANCEL
</div>
<div class="sbutt order" onclick="window.open('dashboard.html', '_blank', 'toolbar=no,scrollbars=no,resizable=no,top=100,left=800,width=380,height=380',overflow=hidden)">
ORDER
</div>
</div>
</div>
CSS
.side {
right: 1px;
float: right;
margin: 0;
margin-right: 1%;
width: 26vw;
height: 80%;
background-color: #ffffff;
border-radius: 10px;
border: 5px solid #EFA078;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
position: fixed;
padding: 0;
}
.content {
height: 51%;
background-color: #ffffff;
}
.pic {
margin-left: 20px;
margin-right: 20px;
max-width: 100%;
}
.sbutt-container {
position: absolute;
display: block;
height: auto;
bottom: 0;
width: 100%;
background-color: white;
height: auto;
padding: 10px;
box-sizing: border-box;
}
.sbutt {
background-color: #EFA078;
display: block;
text-align: center;
font-size: 10px;
vertical-align: middle;
padding: 5px 5px;
}
.cancel {
width: 30%;
float: left;
left: 0;
}
.order {
width: 50%;
float: right;
right: 0;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-column-gap: 1px;
grid-row-gap: 2px;
padding: 0;
width: 69vw;
height: 100%;
margin-left: 0.8%;
float: left;
}
.a {
margin: 0;
width: 150px;
height: 150px;
background-color: red;
}
Watch it in action: https://jsfiddle.net/q4n9rxhg/

on click functions being applied to all divs with same class

I have two panels which are built using the same classes, but their content is slightly different. I have to hide and toggle classes depending on the options the user selects.
I've got the functionality working for the panels, but the issue is that the jQuery its being applied to both panels at the same time on click, which then stops the panels working how I would like. I only want the functions to be applied on click to that specific panel.
I've been reading and I thought that by using (this) would help fix this problem. Same as using .each(). But I've not been able to fix it.
Updated
Here is a jsFiddle, showing how the panels currently work. - new fiddle
User clicks on option 'everyday' within the '1.choose your range' section of the first panel
This triggers option '2 . choose your style' to appear and '1.choose your range' section to hide in the first panel
However when clicking on any of these options its being applied to the second panel also, which I do not want. The second panel should only animate when the user selects the options within that panel.
The panels shouldn't animate unless the user has selected an option within that specific panel.
Here is my jQuery Code:
$('.price-colour li').on('click', function() {
$('.price-colour li').not(this).removeClass('selected');
$(this).toggleClass('selected');
})
$('.style-type').on('click', function() {
$('.style-type').not(this).removeClass('selected');
$(this).toggleClass('selected');
})
$('#basket-cart').on('click', function() {
$('#popup-shopping').toggleClass('visible');
})
$('#popup-shopping__close-icon').on('click', function() {
$('#popup-shopping').toggleClass('visible');
})
$('.edit-txt').on('click', function() {
$('.range-item').not(this).removeClass('selected');
$(this).parents().find('.price-item-section').toggleClass('inactive');
$(this).addClass('hidden');
$(this).parents().find('.link-btn--solid').toggleClass('inactive');
})
$('.range-item').on('click', function() {
$('.range-item').not(this).removeClass('selected');
$(this).toggleClass('selected');
$('.edit-txt').removeClass('hidden');
$(this).parents().find('.price-item-section').toggleClass('inactive');
$(this).parents().find('.link-btn--solid').toggleClass('inactive');
})
body {
font-size: 14px;
line-height: 20px;
}
h1,
h2,
h3,
h4,
h5 {
font-size: 14px;
line-height: 20px;
}
.o-unlist {
list-style: none;
margin: 0;
padding: 0;
}
.price-item {
border-top: 2px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
}
.price-item-top {
background: black;
padding: 20px;
color: white;
}
.price-item-section {
padding: 15px 30px;
border-bottom: 2px solid black;
}
.price-item-section.inactive h3 {
color: #7d7d7d;
}
.price-item-section.inactive .price-range,
.price-item-section.inactive .price-detail,
.price-item-section.inactive .price-style,
.price-item-section.inactive .price-item-three {
opacity: 0;
visibility: hidden;
transform: scaleY(0);
height: 0;
margin: 0;
padding: 0;
border: none;
overflow: hidden;
}
.price-range {
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-item-three {
padding: 15px 50px 0;
border-top: 2px solid black;
margin: 10px -30px 0;
}
.price-style {
margin-top: 50px;
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-style p {
margin: 10px 0 0;
padding: 0;
letter-spacing: 0.15px;
}
.style-type {
opacity: 0.6;
padding: 5px;
transition-duration: 0.3s;
transition-property: all;
cursor: pointer;
}
.style-type.selected {
opacity: 1;
}
.price-detail {
margin-top: 20px;
opacity: 1;
visibility: visible;
transform: scaleY(1);
height: auto;
transition-duration: 0.3s;
transition-property: transform;
}
.price-colour {
list-style: none;
text-align: center;
margin: 0 -7px 5px;
padding: 0;
}
.price-colour li {
display: inline-block;
margin: 0 9px;
padding: 2px;
border-radius: 100px;
cursor: pointer;
border: 1px solid transparent;
transition-duration: 0.3s;
transition-property: all;
}
.price-colour li span {
border-radius: 100px;
height: 20px;
width: 20px;
display: block;
}
.price-colour li#pink span {
background: pink;
}
.price-colour li#yellow span {
background: yellow;
}
.price-colour li#black span {
background: black;
}
.price-colour li#grey span {
background: #999999;
}
.price-colour li.selected {
border-color: #999999;
}
.price-size-guide {
font-size: 1.2rem;
line-height: 2rem;
color: $monza;
text-align: center;
letter-spacing: 1px;
border: 1px solid red;
padding: 5px;
cursor: pointer;
}
.size-guide-icon {
background: url(../images/size-guide-icon.jpg) no-repeat;
width: 25px;
height: 12px;
background-size: 25px;
display: inline-block;
}
#price-select {
border: 2px solid black;
font-size: 1.3rem;
line-height: 1.8rem;
letter-spacing: 1px;
padding: 5px;
display: block;
width: 100%;
margin: 10px 0;
}
.radio-indicator {
position: absolute;
top: 0px;
left: 0;
height: 20px;
width: 20px;
background: white;
border: 2px solid black;
border-radius: 100px;
transition-duration: 0.3s;
transition-property: all;
}
.radio-select {
cursor: pointer;
font-size: 1.4rem;
letter-spacing: 2px;
position: relative;
padding: 0 0 0 30px;
margin: 0;
}
.radio-select:first-child {
margin-right: 43px;
}
.radio-select input {
position: absolute;
z-index: -1;
opacity: 0;
}
.radio-select input:checked~.radio-indicator {
background: red;
}
.radio-select a {
font-size: 1.1rem;
line-height: 1.1rem;
color: $heli;
display: block;
font-family: $grotesk;
font-weight: $groreg;
letter-spacing: 1px;
}
.edit-txt {
cursor: pointer;
font-size: 1.5rem;
z-index: 10;
position: relative;
transition-duration: 0.3s;
transition-property: all;
font-size: 14px;
line-height: 20px;
}
.edit-txt.hidden {
opacity: 0;
visibility: hidden;
}
.range-item {
display: inline-block;
text-align: center;
padding: 35px 35px 20px 0;
cursor: pointer;
}
.range-item img {
width: 31px;
height: 31px;
border-radius: 100px;
padding: 2px;
border: 1px solid transparent;
}
.range-item p {
margin: 10px 0 0 0;
padding: 0;
font-size: 1.4rem;
line-height: 1.8rem;
letter-spacing: 1px;
font-family: $grotesk;
font-weight: $groreg;
}
.range-item.selected img {
border-color: #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<div class="row">
<div class="col-lg-7">
image in here
</div>
<div class="col-lg-5">
<div class="price-item">
<div class="price-item-top">
<h3 class="heading-price">Choose your bottoms</h3>
</div>
<div class="price-item-one price-item-section clearfix inactive">
<div class="clearfix">
<h3 class="heading-price float-left">1. choose your range: lace</h3>
<span class="edit-txt float-right">edit</span>
</div>
<ul class="price-range o-unlist clearfix">
<li id="lace" class="range-item selected">
<img src="https://via.placeholder.com/31x31" />
<p>lace</p>
</li>
<li id="everyday" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>everday</p>
</li>
<li id="adventure" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>adventure</p>
</li>
<li id="slogan" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>slogan</p>
</li>
</ul>
</div>
<div class="price-item-two price-item-section clearfix">
<h3 class="heading-price">2. choose your style</h3>
<div class="clearfix">
<div class="price-style float-left">
<div class="row">
<div class="col-sm-6 o-txt-center">
<div id="style-brief" class="style-type selected">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>brief</p>
</div>
</div>
<div class="col-sm-6 o-txt-center">
<div id="style-thong" class="style-type">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>thong</p>
</div>
</div>
</div>
</div>
<div class="price-detail float-right">
<ul class="price-colour">
<li id="pink" class="selected"><span></span></li>
<li id="yellow"><span></span></li>
<li id="black"><span></span></li>
<li id="grey"><span></span></li>
</ul>
<div class="price-size-guide" data-toggle="modal" data-target="#popup-size-guide">
redefining size guide <i class="size-guide-icon"></i>
</div>
<select id="price-select">
<option value="small">small (8/10)</option>
<option value="medium">medium (12/14)</option>
<option value="large">large (16/18)</option>
</select>
</div>
</div>
<div class="price-item-three clearfix">
<label class="radio-select float-left">buy once £28
<input type="radio" name="radio" checked="checked"/>
<div class="radio-indicator"></div>
</label>
<label class="radio-select float-right">get monthly £24
how subscription works
<input type="radio" name="radio"/>
<div class="radio-indicator"></div>
</label>
</div>
</div>
</div>
<!-- price item-->
</div>
<!--col lg 5-->
</div>
<!-- row-->
<div class="row">
<div class="col-lg-7">
image in here
</div>
<div class="col-lg-5">
<div class="price-item">
<div class="price-item-top">
<h3 class="heading-price">Choose your top</h3>
</div>
<div class="price-item-one price-item-section clearfix">
<div class="clearfix">
<h3 class="heading-price float-left">1. choose your range: lace</h3>
<span class="edit-txt float-right">edit</span>
</div>
<ul class="price-range o-unlist clearfix">
<li id="lace" class="range-item selected">
<img src="https://via.placeholder.com/31x31" />
<p>lace</p>
</li>
<li id="everyday" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>everday</p>
</li>
<li id="adventure" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>adventure</p>
</li>
<li id="slogan" class="range-item">
<img src="https://via.placeholder.com/31x31" />
<p>slogan</p>
</li>
</ul>
</div>
<div class="price-item-two price-item-section clearfix inactive">
<h3 class="heading-price">2. choose your style</h3>
<div class="clearfix">
<div class="price-style float-left">
<div class="row">
<div class="col-sm-6 o-txt-center">
<div id="style-bra" class="style-type selected">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>bra</p>
</div>
</div>
<div class="col-sm-6 o-txt-center">
<div id="style-bralette" class="style-type">
<img src="https://via.placeholder.com/63x40" width="63" />
<p>bralette</p>
</div>
</div>
</div>
</div>
<div class="price-detail float-right">
<ul class="price-colour">
<li id="pink" class="selected"><span></span></li>
<li id="yellow"><span></span></li>
<li id="black"><span></span></li>
<li id="grey"><span></span></li>
</ul>
<div class="price-size-guide" data-toggle="modal" data-target="#popup-size-guide">
redefining size guide <i class="size-guide-icon"></i>
</div>
<select id="price-select">
<option value="small">small (8/10)</option>
<option value="medium">medium (12/14)</option>
<option value="large">large (16/18)</option>
</select>
</div>
</div>
<div class="price-item-three clearfix">
<label class="radio-select float-left">buy once £28
<input type="radio" name="radio" checked="checked"/>
<div class="radio-indicator"></div>
</label>
<label class="radio-select float-right">get monthly £24
how subscription works
<input type="radio" name="radio"/>
<div class="radio-indicator"></div>
</label>
</div>
</div>
</div>
<div>
<!--col lg 5-->
</div>
<!-- row-->
</section>

Your parents() selector is selecting ALL parents. Use closest() with a selector to only toggle children beneath that element.
$(this).closest('.price-item').find('.price-item-section').toggleClass('inactive');

Jump on slideUp jQuery

I'm trying to create a material design Stepper using Materializecss and I'm almost there, but I'm having some strange issue with the slideUp animation on each step.
When it's just about to end, there is an abrupt jump. I prepared a jsFiddle for you to see, but I'm also writing the code in here:
https://jsfiddle.net/c3xLwzru/
HTML:
<div class="row">
<div class="col l8 m10 s12 offset-l2 offset-m1">
<h3 class="light center-align purple-text text-darken-4">Subscription</h3>
<div class="card">
<div class="card-content">
<ul class="stepper">
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">1</div>Step 1</div>
<div class="step-content">
Example 1
<div class="step-actions">
<button class="waves-effect waves-dark btn" type="submit">SEGUINTE</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">2</div>Step 2</div>
<div class="step-content">
Example 2
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">3</div>Step 3</div>
<div class="step-content">
Example 3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS (adding to Materializecss):
ul.stepper {
max-width: 800px;
}
.step:not(:last-child) {
position: relative;
margin-bottom: 24px;
}
.step:not(:last-child).active {
margin-bottom: 36px;
}
.step-title {
margin: 0 -20px;
cursor: pointer;
margin-bottom: 8px;
padding: 12px 44px 24px 20px;
display: block;
}
.step-title:hover {
background-color: #F0F0F0;
}
.step.active .step-title {
font-weight: 500;
}
.step-title .number {
margin-right: 10px;
display: inline-block;
height: 28px;
width: 28px;
color: white;
background-color: rgba(0,0,0,0.3);
border-radius: 50%;
text-align: center;
line-height: 28px;
font-weight: 400;
}
.step.active .number {
background-color: #9C27B0;
}
.step-content {
display: none;
height: calc(100% - 132px);
width: inherit;
overflow: auto;
margin-left: 41px;
margin-right: 24px;
}
.stepper>.step:not(:last-child)::after {
content: '';
position: absolute;
top: 50px;
left: 13.5px;
width: 1px;
height: calc(100% - 24px);
background-color: rgba(0,0,0,0.1);
}
.stepper>.step.active:not(:last-child)::after {
height: calc(100% - 12px);
}
.step-actions {
display: none;
padding-top: 16px;
margin-right: 24px;
}
.step.active .step-actions {
display: block;
}
And JS, using jQuery:
$(document).on("click", '.stepper .step-title:not(.active)', function () {
$(this).parent().addClass('active');
$(this).next().stop().slideDown('slow');
$(".step.active").not($(this).parent()).find(".step-content").stop().slideUp('slow');
$(".step.active").not($(this).parent()).removeClass('active');
});
I don't know what to do anymore. I tried everything and I couldn't find a reason for them to jump, man.
Could you help me?

Remove margin-bottom: 8px on .step-title and add margin-top: 8px to .step-content.
It should stop abrupt jump

Progress bar percentage align with bar

I'm creating a progress bar, currently the percentage are shown in right side, but now I want the percentage able to follow the bar, no matter the blue bar is short or long.
Example that I expect
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
float: right;
margin-top: 10px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: 5px;
}
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>

HTML:
Move popup_survey_whitebox_percent inside popup_survey_whitebox_progressbar_inner:
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<div id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</div>
</div>
</div>
CSS:
Change margin-top of popup_survey_whitebox_percent:
.popup_survey_whitebox_percent{
float:right;
margin-top: -15px;
font-size:12px;
font-weight:bold;
font-style:italic;
color:#F30;
}
See Fiddle

You could set the margin-left of the percentage values equal to the width of the progress bar.
$('.popup_survey_whitebox_percent').each(function() {
$(this).css('margin-left', $(this).next().next().find('.popup_survey_whitebox_progressbar_inner').css('width'));
});
.popup_survey_whitebox_percent {
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #F30;
margin-top: 5px;
}
.popup_survey_whitebox_progressbar {
background: #444;
width: 100%;
height: 5px;
border-radius: 10px;
}
.popup_survey_whitebox_progressbar_inner {
background: #0CF;
width: 100%;
height: 5px;
border-radius: 10px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
margin-top: -10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="popup_survey_whitebox_percent">75%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;"></div>
</div>
<div class="popup_survey_whitebox_percent">15%</div>
<br />
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;"></div>
</div>
<div class="test"></div>

try this
you only need to put your text percentage tag inside the progressbar html tag
div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:75%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">75%</span>
<br>
</div>
</div>
<br>
<div class="popup_survey_whitebox_progressbar">
<div class="popup_survey_whitebox_progressbar_inner" style="width:15%;">
<span id="popup_survey_whitebox_percent" class="popup_survey_whitebox_percent">15%</span>
</div>
</div>
try this
http://jsfiddle.net/e4wvyamh/