Collect prices with jQuery - javascript

I need to be able to add and display the amount when the numbers are entered using jQuery, as shown in the image below.
please guide me.
These are the html codes:
.tours_description_book {
border: 1px solid #d2ac67;
overflow: hidden;
border-radius: 9px;
}
.tours_description_book .title {
background: #0c1e3a;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 600;
padding: 15px 0;
margin-bottom: 15px;
}
.tours_description_book > ul {
display: grid;
grid: auto / auto;
padding: 15px 35px;
}
.tours_description_book > ul > li > ul {
display: grid;
grid: auto / 50% 50%;
padding-left: 20px;
}
.tours_description_book > ul > li {
border-bottom: 1px solid #dcdddf;
font-weight: 600;
font-size: 16px;
padding: 15px 0;
color: #0c1e3a;
}
.tours_description_book > ul > li > ul > li:last-of-type {
text-align: center;
}
.tours_description_book > ul > li:first-of-type > ul > li:last-of-type {
text-align: left;
}
.tours_description_book > ul > li:first-of-type {
font-weight: 400;
}
.tours_description_book > ul > li:last-of-type {
border: 0;
}
.tours_description .tours_description_book a {
display: block;
width: calc(100% - 60px);
margin: 0 auto 50px;
background: #0c1e3a;
text-align: center;
color: #fff;
border-radius: 9px;
font-weight: 600;
line-height: 60px;
}
.tours_description .tours_description_book a:hover {
background: #d2ac67;
}
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 1px solid #d2ac67;
display: inline-flex;
border-radius: 5px;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline:none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before {
display: inline-block;
content: '-';
color: #d2ac67;
font-size: 18px;
}
.number-input button.plus:before {
content: '+';
}
.number-input input[type=number] {
max-width: 4rem;
padding: .5rem;
border: solid #d2ac67;
border-width: 0 1px;
font-size: 16px;
height: 3rem;
font-weight: 600;
text-align: center;
}
<div class="tours_description_book wrapper">
<div class="title wrapper">- Booking -</div>
<ul>
<li>
<ul>
<li>Adults
<div class="number-input cart-free">
<button onclick="this.parentNode.querySelector('.Adults_N').stepDown()" ></button>
<input class="quantity Adults_N" min="0" name="Adults" value="1" type="number">
<button onclick="this.parentNode.querySelector('.Adults_N').stepUp()" class="plus"></button>
</div>
</li>
<li>Children
<div class="number-input cart-free">
<button onclick="this.parentNode.querySelector('.Children_N').stepDown()" ></button>
<input class="quantity Children_N" min="0" name="Children" value="0" type="number">
<button onclick="this.parentNode.querySelector('.Children_N').stepUp()" class="plus"></button>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>Adults</li>
<li class="cart-free amount">0</li>
</ul>
</li>
<li>
<ul>
<li>Children</li>
<li class="cart-free amount">0</li>
</ul>
</li>
<li>
<ul>
<li>TOTAl COST</li>
<li class="total">0$</li>
</ul>
</li>
</ul>
‌BOOK NOW
</div>
The details I think are clear in the picture. But this is how we enter the number of adults and children, and finally with jQuery we have to add the prices and show the final price.
These are html and css code. Unfortunately I do not have much control over jQuery to close the project.


I removed the inline onclick events from your buttons and added them back in as a programatic event listener. That way we can tie into these events to populate the prices. Rather than explain line by line, take a look and ask any questions you might have about how this works.
let adultPrice = 19.99, childPrice = 11.99;
window.addEventListener('DOMContentLoaded', () => {
let buttons = document.querySelectorAll('.step-button');
buttons.forEach(el => {
el.addEventListener('click', e => {
let inc = -1;
if (e.target.classList.contains('plus')) inc = 1;
let input = e.target.closest('div').querySelector('input');
input.value = Math.max((+input.value + inc), 0);
calcAmounts()
})
})
calcAmounts()
})
function calcAmounts() {
document.querySelector('.adult-subtotal').innerHTML = '$' + (+document.querySelector('.Adults_N').value * adultPrice).toFixed(2);
document.querySelector('.child-subtotal').innerHTML = '$' + (+document.querySelector('.Children_N').value * childPrice).toFixed(2);
document.querySelector('.total').innerHTML = '$' + (+document.querySelector('.adult-subtotal').innerHTML.replace(/[^\d.-]/g, '') + +document.querySelector('.child-subtotal').innerHTML.replace(/[^\d.-]/g, '')).toFixed(2);
}
.tours_description_book {
border: 1px solid #d2ac67;
overflow: hidden;
border-radius: 9px;
}
.tours_description_book .title {
background: #0c1e3a;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: 600;
padding: 15px 0;
margin-bottom: 15px;
}
.tours_description_book>ul {
display: grid;
grid: auto / auto;
padding: 15px 35px;
}
.tours_description_book>ul>li>ul {
display: grid;
grid: auto / 50% 50%;
padding-left: 20px;
}
.tours_description_book>ul>li {
border-bottom: 1px solid #dcdddf;
font-weight: 600;
font-size: 16px;
padding: 15px 0;
color: #0c1e3a;
}
.tours_description_book>ul>li>ul>li:last-of-type {
text-align: center;
}
.tours_description_book>ul>li:first-of-type>ul>li:last-of-type {
text-align: left;
}
.tours_description_book>ul>li:first-of-type {
font-weight: 400;
}
.tours_description_book>ul>li:last-of-type {
border: 0;
}
.tours_description .tours_description_book a {
display: block;
width: calc(100% - 60px);
margin: 0 auto 50px;
background: #0c1e3a;
text-align: center;
color: #fff;
border-radius: 9px;
font-weight: 600;
line-height: 60px;
}
.tours_description .tours_description_book a:hover {
background: #d2ac67;
}
input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
border: 1px solid #d2ac67;
display: inline-flex;
border-radius: 5px;
}
.number-input,
.number-input * {
box-sizing: border-box;
}
.number-input button {
outline: none;
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before {
display: inline-block;
content: '-';
color: #d2ac67;
font-size: 18px;
}
.number-input button.plus:before {
content: '+';
}
.number-input input[type=number] {
max-width: 4rem;
padding: .5rem;
border: solid #d2ac67;
border-width: 0 1px;
font-size: 16px;
height: 3rem;
font-weight: 600;
text-align: center;
}
<div class="tours_description_book wrapper">
<div class="title wrapper">- Booking -</div>
<ul>
<li>
<ul>
<li>Adults
<div class="number-input cart-free">
<button class="step-button"></button>
<input class="quantity Adults_N" min="0" name="Adults" value="1" type="number">
<button class="step-button plus"></button>
</div>
</li>
<li>Children
<div class="number-input cart-free">
<button class="step-button"></button>
<input class="quantity Children_N" min="0" name="Children" value="0" type="number">
<button class="step-button plus"></button>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>Adults</li>
<li class="cart-free adult-subtotal amount">0</li>
</ul>
</li>
<li>
<ul>
<li>Children</li>
<li class="cart-free child-subtotal amount">0</li>
</ul>
</li>
<li>
<ul>
<li>TOTAl COST</li>
<li class="total">0$</li>
</ul>
</li>
</ul>
‌BOOK NOW
</div>


You must use id's instead of a class where you want to make your element to be accessible uniquely ! .... Also instead of inline js use functions it will make your code much cleaner ...
Since you didn't had any js so i wrote it accordingly..
See =>
HTML
<div class="title wrapper">
- Booking -
</div>
<ul>
<li>
<ul>
<li>Adults
<div class="number-input cart-free">
<button onclick="dec(this)" class="minus"></button>
<input class="quantity Adults_N" min="0" name="Adults" id="Adults" value="1" type="number">
<button onclick="inc(this)" class="plus"></button>
</div>
</li>
<li>Children
<div class="number-input cart-free">
<button onclick="dec(this)" class="minus"></button>
<input class="quantity Children_N" min="0" name="Children" id="Children" value="0" type="number">
<button onclick="inc(this)" class="plus"></button>
</div>
</li>
</ul>
</li>
<li>
<ul>
<li>Adults</li>
<li class="cart-free amount" id="Adult_display">0</li>
</ul>
</li>
<li>
<ul>
<li>Children</li>
<li class="cart-free amount" id="Child_display">0</li>
</ul>
</li>
<li>
<ul>
<li>TOTAl COST</li>
<li class="total"><span id="total">0</span>$</li>
</ul>
</li>
</ul>
‌BOOK NOW
JS
const adult_price = 100;
const child_price = 20;
const total = document.querySelector('#total')
const adult_count = document.querySelector("#Adults");
const child_count = document.querySelector("#Children");
const child_display = document.querySelector("#Child_display");
const adult_display = document.querySelector("#Adult_display");
adult_display.innerText = adult_count.value;
child_display.innerText = child_count.value;
// Handling inc or dec
function inc(element) {
element = element.parentElement.querySelector("input");
element.stepUp()
count_change(element)
}
function dec(element) {
element = element.parentElement.querySelector("input")
element.stepDown();
count_change(element)
}
// Adding listneres for change in values
adult_count.addEventListener("change", function (element) {
element = element.target;
count_change(element);
});
child_count.addEventListener('change', function (element) {
element = element.target;
count_change(element);
});
// Upadte UI and calculate final price
function count_change(ele) {
if (ele === adult_count) {
adult_display.innerText = adult_count.value
} else if (ele === child_count) {
child_display.innerText = child_count.value
}
calculate_price()
}
function calculate_price() {
let total_price = parseInt(total.innerText)
if (parseInt(adult_count.value) !== 0 && adult_count.value !== "") {
total_price = parseInt(adult_count.value) * adult_price + parseInt(child_count.value) * child_price;
adult_display.innerText = parseInt(adult_count.value) * adult_price + "$";
}
if (parseInt(child_count.value) !== 0 && child_count.value !== "") {
total_price = parseInt(adult_count.value) * adult_price + parseInt(child_count.value) * child_price;
child_display.innerText = parseInt(child_count.value) * child_price + "$";
}
total.innerText = total_price;
}
calculate_price()

Related

Created Modal displays after click, then removes itself again

I created 2 Modals.The first modal, which is class = "modal" appears as it should when add button is clicked, but when I click the "+" sign on the form to display the next Modal which is the class = "category-modal that modal goes back to display none for some reason.
I made a runable code:
//get HTML elements username
let arrow = document.querySelector(".next");
let profSetting = document.querySelector(".prof-settings ul");
let asset = document.querySelector(".nav-side-asset");
//click event for username drop-down
arrow.addEventListener("click", () => {
arrow.classList.toggle('rotate-90');
profSetting.classList.toggle('transform');
asset.classList.toggle('position');
modal.classList.toggle('modal-position');
});
//get HTML elements assets
let arrowAsset = document.querySelector(".next-asset");
let assets = document.querySelector(".assets ul");
//click event for asset drop-down
arrowAsset.addEventListener("click", () => {
arrowAsset.classList.toggle('rotate-90');
assets.classList.toggle('transform');
})
//Generate tag ID
//get HTML elements modal
let modal = document.querySelector(".modal");
let addbtn = document.querySelector(".add-button");
let close = document.querySelector(".close");
let background = document.querySelector(".greyback")
//click event for modal pop up
addbtn.addEventListener("click", () => {
modal.style.display = "block";
genID()
background.style.display = "block";
})
//click event for modal remove itself
close.addEventListener("click", () => {
modal.style.display = "none";
})
function genID() {
let minNum = 0;
let maxNum = 1000;
let randomNum = Math.floor(Math.random() * (maxNum + 1) + minNum)
document.querySelector(".id").innerHTML = randomNum;
}
//get modal for category and department
let categoryModal = document.querySelector(".category-modal");
let categoryAdd = document.querySelector(".category-add");
let cancel = document.querySelector(".cancel");
categoryAdd.addEventListener("click", () => {
categoryModal.style.display = "block";
})
body {
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
background-color: var(--light-purplr);
}
:root {
--dark-purple: #3B3F8C;
--light-purplr: #4449A6;
--light-green: #6BBF54;
--darkish-green: #6FA656;
--lighter-white: #F2F2F2;
--light-white: #e9e9e9;
}
.greyback {
background-color: rgb(128, 128, 128, 0.7);
width: 120em;
height: 60.55em;
position: absolute;
display: none;
z-index: 1;
}
.nav-top {
background-color: var(--lighter-white);
display: grid;
grid-template-columns: 15em 70em 0em;
margin-left: -1em;
}
.nav-top ul {
display: flex;
width: 20vw;
margin-top: 1.5em;
}
.nav-top li {
list-style-type: none;
margin-left: 1em;
display: flex;
cursor: pointer;
padding: 8px 8px 8px 8px;
}
.nav-top li:hover {
background-color: var(--light-white);
}
.nav-banner img {
margin-left: 2em;
margin-top: 1em;
width: 14em;
height: 3em;
}
.nav-top ul img {
width: 1em;
height: 1em;
}
.profile {
width: 2em !important;
height: 2em !important;
margin-top: -0.5em;
}
.nav-side,
.nav-side-asset {
background-color: var(--lighter-white);
width: 13em;
height: 2.5em;
}
.nav-side ul,
.nav-side-asset ul {
background-color: var(--lighter-white);
position: absolute;
height: 2.5em;
margin-top: 8px;
width: 10.5em;
}
.nav-side li,
.nav-side-asset li {
list-style-type: none;
margin-top: 10px;
margin-left: 5px;
}
.profile-side,
.asset-side {
display: flex;
}
.profile-side img,
.asset-side img {
width: 1.5em;
height: 1.5em;
margin-left: 1em;
margin-top: 0.5em;
}
.profile-side p,
.asset-side p {
margin-left: 3em;
margin-top: 0.8em;
position: absolute;
}
.next,
.next-asset {
margin: 1em 11em !important;
width: 10px !important;
height: 10px !important;
position: absolute;
cursor: pointer;
transition: .2s transform ease;
}
.prof-settings ul,
.assets ul {
background-color: var(--lighter-white);
padding-bottom: 3em;
cursor: pointer;
display: none;
}
.assets li {
display: flex;
}
.assets img {
padding-right: 1em;
}
.list {
width: 1em;
}
.add-asset {
width: 1em;
margin-left: -1px;
}
.in,
.out {
width: 1.3em;
margin-left: -4px;
}
.assets ul {
padding-bottom: 6em !important;
}
.prof-settings li:hover,
.assets li:hover {
color: var(--light-green);
}
.rotate-90 {
transform: rotate(90deg);
}
.transform {
display: block !important;
}
.position {
margin-top: 5em;
}
.modal {
position: absolute;
/*display: none;*/
z-index: 2
}
.asset-modal-box {
background-color: var(--light-white);
width: 40em;
height: 40em;
margin-left: 40em;
}
.modal-position {
margin-top: -5em;
}
.form {
padding: 1em;
}
.section-left {
position: absolute;
width: 7em;
}
.section-right {
position: relative;
margin-left: 20em;
margin-top: 2.1em;
}
.brand-container,
.model-container,
.serial-container {
margin-bottom: 1em;
}
.item-container,
.date-purchased-container,
.cost-container,
.tag-container,
.tag-container {
margin-bottom: 1em;
}
.description-container,
.model-container,
.serial-container,
.brand-container,
.item-container,
.date-purchased-container,
.tag-container,
.cost-container {
display: grid;
}
.description-container {
margin-top: 3em;
margin-bottom: 1em;
}
.tag-container {
display: flex;
}
.item {
width: 20em;
}
.l-purchased {
width: 8em;
}
.currency {
background-color: var(--darkish-green);
width: 2em;
}
.rand {
display: flex;
height: 2em;
padding-left: 1em;
}
.rand p {
margin-top: 7px;
margin-left: -6px;
}
.cost {
margin-left: 1em;
position: absolute;
}
.item,
.brand,
.model,
.serial,
.date,
.cost,
.description,
.purchased,
.tag {
height: 26px;
}
.buttons {
margin: 0em 1em;
padding-top: 12em;
}
.submit,
.close {
margin-left: 6em;
padding: 1em 2em;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
border: none;
background-color: var(--light-green);
}
.close:hover {
background-color: red;
}
.department {
margin-left: 4.3em;
}
select {
width: 10em;
}
.category-modal {
background-color: var(--light-green);
width: 37em;
padding: 7px;
position: absolute;
margin-top: -32em;
display: none;
}
.category-modal h3 {
color: var(--dark-purple);
}
.line,
.line-bottom {
border-top: 1px solid black;
}
.line-bottom {
margin-top: 1em;
}
.category-input {
padding: 5px;
margin-left: 28.8em;
margin-top: 1em;
}
.add,
.cancel {
width: 4em;
border: none;
background-color: var(--dark-purple);
border-radius: 3px;
cursor: pointer;
margin-top: 1em;
color: var(--light-white);
padding: 5px;
}
.add {
margin-left: 33em;
}
.cancel {
margin-left: 1em;
}
.close-category {
position: absolute;
margin-top: -2.5em;
margin-left: 35em;
cursor: pointer;
}
<div class="greyback"></div>
<header>
<nav class="nav-top">
<div class="nav-banner">
<img src="./references/images/CS247-Pastel-Logo (1).jpg" alt="CS247 Logo">
</div>
<ul class="left">
<li><img src="./references/images/List icon.png" alt="list icon">List of Assets</li>
<li class="add-button"><img src="./references/images/add icon.png" alt="Add button">Add an Asset</li>
<li><img src="./references/images/Search.png" alt="Search">Search</li>
</ul>
<ul class="right">
<li><img src="./references/images/clock.png" alt="clock">Changelog</li>
<li><img src="./references/images/tag.png" alt="clock">Buy Asset Tags</li>
<li><img class="profile" src="./references/images/profile pic.png" alt="profile pic"></li>
</ul>
</nav>
</header>
<main>
<aside>
<nav class="nav-side">
<div class="profile-side">
<img src="./references/images/profile pic.png" alt="profile pic">
<img class="next" src="./references/images/next.png" alt="next">
<p>Username</p>
</div>
<div class="prof-settings">
<ul>
<li>My Profile</li>
<li>Change Password</li>
<li>Log out</li>
</ul>
</div>
</nav>
<nav class="nav-side-asset">
<div class="asset-side">
<img src="./references/images/asset-management.png" alt="Asset icon">
<img class="next-asset" src="./references/images/next.png" alt="next">
<p>Assets</p>
</div>
<div class="assets">
<ul>
<li><img class="list" src="./references/images/List icon.png" alt="list icon">List of Assets</li>
<li><img class="add-asset" src="./references/images/add icon.png" alt="Add button">Add an Asset</li>
<li><img class="in" src="./references/images/checkbox-in.png" alt="in icon">Assets In</li>
<li><img class="out" src="./references/images/X-out.png" alt="out icon">Assets Out</li>
</ul>
</div>
</nav>
</aside>
<div class="modal">
<div class="asset-modal-box">
<form class="form">
<!--Left of form inputs and labels-->
<div class="section-left">
<div class="tag-container">
<label for="tag" class="l-tag">Tag ID:</label>
<label class="id"></label>
</div>
<div class="item-container">
<label for="item" class="l-item">Item</label>
<input type="text" name="item" class="item">
</div>
<div class="date-purchased-container">
<label for="item" class="l-purchased">Date of Purchase</label>
<input type="date" name="item" class="purchased">
</div>
<div class="cost-container">
<label for="item" class="l-cost">Cost</label>
<div class="currency">
<div class="rand">
<p>R</p>
<input type="text" name="item" class="cost">
</div>
</div>
</div>
</div>
<!--Right of form inputs and labels-->
<div class="section-right">
<div class="brand-container">
<label for="brand" class="l-brand">Brand</label>
<input type="text" name="brand" class="brand">
</div>
<div class="model-container">
<label for="model" class="l-model">Model</label>
<input type="text" name="Model" class="model">
</div>
<div class="serial-container">
<label for="serial" class="l-serial">Serial No</label>
<input type="text" name="serial" class="serial">
</div>
</div>
<div class="description-container">
<label for="description" class="l-description">Description</label>
<input type="text" name="serial" class="description">
</div>
<!--Selections-->
<div class="options">
<label class="category" for="category">Category
<select name="category" id="category" class="category">
</select>
<button class="category-add">+</button>
</label>
<label class="department" for="department">Department
<select name="department" id="department" class="department-select"></select>
<button class="department-add">+</button>
</label>
<!--Modal for select options input-->
<div class="category-modal">
<h3>Add Catagory</h3>
<div class="close-category">X</div>
<div class="line"></div>
<p>If you want to add a new category of assets, you're in the right spot. Add a category for computer equipment, wireless keyboards, or any assets you're working with.
</p>
<input type="text" class="category-input">
<div class="line-bottom"></div>
<button class="add">Add</button>
<button class="cancel">Cancel</button>
</div>
</div>
<!--Form Buttons-->
<div class="buttons">
<button class="submit">Add Item</button>
<button class="close">Close</button>
</div>
</form>
</div>
</div>
</main>
I have attached a screenshot on what buttons to press to get to the issue:

I installed the code you have given and played with it. I noticed that the issue you are facing is due to the page being refreshed, the normal behaviour when you click on a button inside a form, which you can prevent with e.preventDefault(). For categoryAdd as an example:
categoryAdd.addEventListener("click", (e) => {
e.preventDefault();
categoryModal.style.display = "block";
});
Add e.preventDefault() for each button that don't need to refresh the page, after passing the event e as parameter like I did above.

I have three drop down button I want to click the specific dropdown and pop up the list and display on the that specific click dropdown , not in all

I have three drop down button that I style them using the same class. When I click any of them it pops up a list where I select any list under the dropdown and display it on the button.
The problem is that it's displaying in all of the three dropdowns even though I focus on the specific drop down and I am voiding to have along code by changing each an every dropdown an ID and target on it. If there's away to do it may you please help.
.dropdownbox>button {
color: #7C99AA;
background-color: white;
border: 1px solid #7C99AA;
border-radius: 0.5em;
padding: 0.7em 1em;
width: 10vw;
font-size: 12px;
line-height: 1.4em;
user-select: none;
cursor: pointer;
text-indent: 1px;
text-overflow: '';
text-align: center;
outline: none;
text-align: center;
}
ul.menu {
list-style: none;
position: absolute;
margin: 0 auto;
width: 8vw;
overflow: hidden;
height: 0px;
margin-top: 2px;
background: white;
color: #9FA5B5;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
padding: 5px 20;
position: absolute;
}
ul.menu li {
font-size: 16px;
padding: 0.7em 0em;
margin: -0.3em 0;
border-radius: 0.5em;
cursor: pointer;
}
ul.menu li:hover {
color: white;
background: #7C99AA;
}
.menu.showMenu {
height: 20vh;
}
<div class="wrapCollect3">
<div class="dropdownbox">
<button class="dropbtn" id="penaltybtn">Select</button>
</div>
<ul id="menu3" class="menu">
<li id="applicc">Not Applicable</li>
<li id="appYes">Yes</li>
<li id="appNo">No</li>
</ul>
</div>
<div class="wrapper">
<div class="dropdownbox">
<button class="dropbtn" id="offboarding">Select</button>
</div>
<ul id="menu1" class="menu">
<li name="offboarding" id="resignation">Resignation</li>
<li name="offboarding" id="contract">Contract Expiration</li>
<li name="offboarding" id="retrenchment">Retrenchment</li>
<li name="offboarding" id="dismissal">Dismissal</li>
<li name="offboarding" id="retirement">Retirement</li>
</ul>
</div>
<div class="collecWrap">
<div class="dropdownbox">
<button class="dropbtn" id="dropbtn">Collected</button>
</div>
<ul id="menu2" class="menu">
<li id="returnNot" value="NotReturned">Not Returned</li>
<li id="majority" value="majority">Majority Returned</li>
<li id="all">All Returned</li>
</ul>
</div>

You can try it like this:
$('.dropdownbox').click(function() {
$('.menu').hide();
$(this).next('.menu').show();
});
I've also changed your css a little bit. I've removed height:0px from ul.menu and added display:none;
$('.dropdownbox').click(function() {
$('.menu').hide();
$(this).next('.menu').show();
});
.dropdownbox>button {
color: #7C99AA;
background-color: white;
border: 1px solid #7C99AA;
border-radius: 0.5em;
padding: 0.7em 1em;
width: 10vw;
font-size: 12px;
line-height: 1.4em;
user-select: none;
cursor: pointer;
text-indent: 1px;
text-overflow: '';
text-align: center;
outline: none;
text-align: center;
}
ul.menu {
list-style: none;
position: absolute;
margin: 0 auto;
width: 8vw;
overflow: hidden;
margin-top: 2px;
background: white;
color: #9FA5B5;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
padding: 5px 20px;
position: absolute;
display:none;
}
ul.menu li {
font-size: 16px;
padding: 0.7em 0em;
margin: -0.3em 0;
border-radius: 0.5em;
cursor: pointer;
}
ul.menu li:hover {
color: white;
background: #7C99AA;
}
.menu.showMenu {
height: 20vh;
}
.wrapper,.wrapCollect3,.collectWrap{
display: inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapCollect3">
<div class="dropdownbox">
<button class="dropbtn" id="penaltybtn">Select</button>
</div>
<ul id="menu3" class="menu">
<li id="applicc">Not Applicable</li>
<li id="appYes">Yes</li>
<li id="appNo">No</li>
</ul>
</div>
<div class="wrapper">
<div class="dropdownbox">
<button class="dropbtn" id="offboarding">Select</button>
</div>
<ul id="menu1" class="menu">
<li name="offboarding" id="resignation">Resignation</li>
<li name="offboarding" id="contract">Contract Expiration</li>
<li name="offboarding" id="retrenchment">Retrenchment</li>
<li name="offboarding" id="dismissal">Dismissal</li>
<li name="offboarding" id="retirement">Retirement</li>
</ul>
</div>
<div class="collecWrap">
<div class="dropdownbox">
<button class="dropbtn" id="dropbtn">Collected</button>
</div>
<ul id="menu2" class="menu">
<li id="returnNot" value="NotReturned">Not Returned</li>
<li id="majority" value="majority">Majority Returned</li>
<li id="all">All Returned</li>
</ul>
</div>

You are not too clear in your answer, and you are providing no working code,
But If I get it, you need to show on the button the text you click in the submenu, like "emulating a select".
It's quite easy.
So, on the 3 main parents add a class
<div class="wrapCollect3 buttonParent">
[...]
<div class="wrapper buttonParent">
[...]
<div class="collecWrap buttonParent">
In js, add a function to retrieve them on click
function getParentByClass(el, className, maxDepth=10) {
let i=0;
while (!el.classList.contains(className)) {
el=el.parentElement;
i++;
if (i>maxDepth) return false;
}
return el;
}
call it like this:
// In your onclick function,
// given "el" as the clicked submenu button
let parent = getParentByClass(el, "buttonParent")
Now find the button inside the buttonParent of the clicked submenu, and set its text as the text you clicked in the submenu
parent.querySelector('button').innerText = el.getText();
Now you just need to fix the "hide" submenu when you click outside the submenu. I leave this exercise to you, because this is not "code solution" website, and we are here always to learn! Cheers!
/// Taken from Carsten Løvbo Andersen answer
$('.dropdownbox').click(function() {
$('.menu').hide();
$(this).next('.menu').show();
});
//// Maybe there is some jquery version, but this is universal
/// this find parent by class name, giving a depth in search too
function getParentByClass(el, className, maxDepth=10) {
let i=0;
while (!el.classList.contains(className)) {
el=el.parentElement;
i++;
if (i>maxDepth) return false;
}
return el;
}
document.querySelectorAll("ul.menu li").forEach(function(el){
el.addEventListener('click', function(c){
let li = c.target;
let t = li.innerText;
let p = getParentByClass(li, 'parentButton');
p.querySelector('button').innerText = t;
$('.menu').hide();
});
});
.dropdownbox>button {
color: #7C99AA;
background-color: white;
border: 1px solid #7C99AA;
border-radius: 0.5em;
padding: 0.7em 1em;
width: 10vw;
font-size: 12px;
line-height: 1.4em;
user-select: none;
cursor: pointer;
text-indent: 1px;
text-overflow: '';
text-align: center;
outline: none;
text-align: center;
}
ul.menu {
list-style: none;
position: absolute;
margin: 0 auto;
width: 8vw;
overflow: hidden;
margin-top: 2px;
background: white;
color: #9FA5B5;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
padding: 5px 20px;
position: absolute;
display:none;
}
ul.menu li {
font-size: 16px;
padding: 0.7em 0em;
margin: -0.3em 0;
border-radius: 0.5em;
cursor: pointer;
}
ul.menu li:hover {
color: white;
background: #7C99AA;
}
.menu.showMenu {
height: 20vh;
}
.wrapper,.wrapCollect3,.collectWrap{
display: inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapCollect3 parentButton">
<div class="dropdownbox">
<button class="dropbtn" id="penaltybtn">Select</button>
</div>
<ul id="menu3" class="menu">
<li id="applicc">Not Applicable</li>
<li id="appYes">Yes</li>
<li id="appNo">No</li>
</ul>
</div>
<div class="wrapper parentButton">
<div class="dropdownbox">
<button class="dropbtn" id="offboarding">Select</button>
</div>
<ul id="menu1" class="menu">
<li name="offboarding" id="resignation">Resignation</li>
<li name="offboarding" id="contract">Contract Expiration</li>
<li name="offboarding" id="retrenchment">Retrenchment</li>
<li name="offboarding" id="dismissal">Dismissal</li>
<li name="offboarding" id="retirement">Retirement</li>
</ul>
</div>
<div class="collecWrap parentButton">
<div class="dropdownbox">
<button class="dropbtn" id="dropbtn">Collected</button>
</div>
<ul id="menu2" class="menu">
<li id="returnNot" value="NotReturned">Not Returned</li>
<li id="majority" value="majority">Majority Returned</li>
<li id="all">All Returned</li>
</ul>
</div>

Change background colour of an active div

I have created a drop down menu.I wanna change the background color of active span tag, which contains the arrow image. And on click of any dropdown option, it should close and that option should come in the menu.
example:- if i click on option 'DROP ITEM 2' option , it should replace the 'ITEM NAME'.
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
$("#rotate_sign").css({
'background-color': 'green'
});
var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
e(".button-dropdown .dropdown_menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown_menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
* {
box-sizing: border-box;
}
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font-family: 'PT Sans Caption', sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
padding: 5px 0px 0px 0px;
}
.nav li {
display: inline-block;
list-style: none;
width: 100%;
}
.nav .button-dropdown {
position: relative;
}
.nav .button-dropdown .dropdown-toggle {
display: block;
padding: 0px 0px 0px 20px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
}
.nav .button-dropdown .dropdown_items {
display: block;
padding: 10px 2px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
border-bottom: solid 0.5px #e4e4e4;
}
.border_bottom_none {
border-bottom: solid 1px #ffffff;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
height: 26.5px;
background-color: #f3f3f3;
}
.dropdown_menu {
z-index: 1000;
float: left;
/*min-width: 160px;*/
font-size: 14px;
list-style: none;
border-radius: 1px;
}
.nav li .dropdown_menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
background-color: #f3f3f3;
box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}
.nav li .dropdown_menu.active {
display: block;
}
.nav li .dropdown_menu a {
width: 90%;
margin: auto;
}
div.custom-table {
display: table;
width: 100%;
}
div.custom-table-row {
display: table-row
}
div.custom-table-cell {
display: table-cell;
padding: 3px;
}
.custom-table-row>.custom-table-cell {
height: 35px;
padding-bottom: 0px;
}
div.table-cell-data {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
}
div.table-cell-data.right-align {
justify-content: flex-end;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
border-bottom: 1px solid #cccccc;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
width: 32px;
height: 32px;
margin: 0 5px;
margin-right: 10px;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
min-width: 5%;
white-space: nowrap;
border: none;
vertical-align: middle;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
width: 45%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
width: 25%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
width: 15%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
width: 10%;
}
.sign_rotate {
height: 20px;
width: 19px;
}
.sign_rotate img {
width: 100%;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
<div class="custom-table-row">
<div class="custom-table-cell">
<div class="table-cell-data">
<input type="checkbox" />
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
ITEM name <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data right-align">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>

place the text "item name " in a span with an id named label1
and add the following
e(".dropdown_menu").click(function(event){
e("#label1").text(event.target.textContent.trim());
})
Snippet below
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
$("#rotate_sign").css({
'background-color': 'green'
});
var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
e(".button-dropdown .dropdown_menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown_menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown-toggle").removeClass("active");
});
e(".dropdown_menu").click(function(event) {
e("#label1").text(event.target.textContent.trim());
console.log(this);
})
e(".table-cell-data").click(function(ev){
var that=this;
e(".table-cell-data").each(function(){
if(this.classList.contains("color_me") && this!=that){
this.classList.remove("color_me");
}
})
this.classList.add("color_me")
})
});
* {
box-sizing: border-box;
}
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font-family: 'PT Sans Caption', sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
padding: 5px 0px 0px 0px;
}
.nav li {
display: inline-block;
list-style: none;
width: 100%;
}
.nav .button-dropdown {
position: relative;
}
.nav .button-dropdown .dropdown-toggle {
display: block;
padding: 0px 0px 0px 20px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
}
.nav .button-dropdown .dropdown_items {
display: block;
padding: 10px 2px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
border-bottom: solid 0.5px #e4e4e4;
}
.border_bottom_none {
border-bottom: solid 1px #ffffff;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
height: 26.5px;
background-color: #f3f3f3;
}
.dropdown_menu {
z-index: 1000;
float: left;
/*min-width: 160px;*/
font-size: 14px;
list-style: none;
border-radius: 1px;
}
.nav li .dropdown_menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
background-color: #f3f3f3;
box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}
.nav li .dropdown_menu.active {
display: block;
}
.nav li .dropdown_menu a {
width: 90%;
margin: auto;
}
div.custom-table {
display: table;
width: 100%;
}
div.custom-table-row {
display: table-row
}
div.custom-table-cell {
display: table-cell;
padding: 3px;
}
.custom-table-row>.custom-table-cell {
height: 35px;
padding-bottom: 0px;
}
div.table-cell-data {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
}
div.table-cell-data.right-align {
justify-content: flex-end;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
border-bottom: 1px solid #cccccc;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
width: 32px;
height: 32px;
margin: 0 5px;
margin-right: 10px;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
min-width: 5%;
white-space: nowrap;
border: none;
vertical-align: middle;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
width: 45%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
width: 25%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
width: 15%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
width: 10%;
}
.sign_rotate {
height: 20px;
width: 19px;
}
.sign_rotate img {
width: 100%;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.color_me{
background:green;
color:white;
}
#rotate_sign{
background:transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
<div class="custom-table-row">
<div class="custom-table-cell">
<div class="table-cell-data">
<input type="checkbox" />
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
<span id="label1"> ITEM name <span><span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data right-align">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>

Incorrect open multiselect list

When you click on the icon have to be opened only one list (which icon pressed). How can I do each list unique? Please help! In this code I use font-awesome, sorry about it, but I can't add it in this example.
$(".filterBlock .filter-ico").on('click', function() {
$(".filterDropdown dd ul").slideToggle('fast');
});
$(".filterDropdown dd ul li a").on('click', function() {
$(".filterDropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("filterDropdown")) $(".filterDropdown dd ul").hide();
});
$('.multiselect input[type="checkbox"]').on('click', function() {
var title = $(this).closest('.mutliselect').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
$('.resultSelect').append(html);
$(".resultFilter").hide();
} else {
$('span[title="' + title + '"]').remove();
var ret = $(".resultFilter");
$('.filterDropdown dt a').append(ret);
}
});
.filters {
width: 20%;
height: 100%;
background-color: #fff;
border-right: 1px solid #f7f7f7;
position: relative;
display: inline-block;
}
.filterBlock {
margin: 0 0 50px 0;
position: relative;
}
.filterBlock h3 {
margin: 30px 0 0 40px;
color: #a6a6a6;
font: 16px Helvetica;
}
.filterBlock .filter-ico {
position: absolute;
left: 100px;
font-size: 25px;
color: #5795f9;
cursor: pointer;
}
.filterBlock .filter-ico.sphere {
left: 190px;
}
.filterBlock .filter-ico.show {
left: 200px;
}
.filterDropdown {
position: absolute;
top: 10px;
left: 20px;
z-index: 5;
transform: translateY(-10%);
transform: translateX(10%);
}
.filterDropdown a {
color: #5795f9;
}
.filterDropdown dd,
.filterDropdown dt {
margin: 0px;
padding: 0px;
}
.filterDropdown ul {
margin: -1px 0 0 0;
}
.filterDropdown dd {
position: relative;
}
.filterDropdown a,
.filterDropdown a:visited {
color: #5795f9;
text-decoration: none;
outline: none;
font-size: 12px;
}
/*.filterDropdown dt a {
background-color: #fff;
display: block;
padding: 8px 20px 5px 10px;
min-height: 15px;
line-height: 24px;
overflow: hidden;
border: 0;
width: 152px;
border:1px solid black;
}*/
.filterDropdown dt a span,
.resultSelect span {
cursor: pointer;
display: inline-block;
color: #5795f9;
margin: 0 0 0 20px;
/* padding: 0 6px 2px 0;*/
}
.filterDropdown dd ul {
background-color: #fff;
border: 0;
color: #5795f9;
display: none;
left: 0px;
padding: 2px 15px 2px 5px;
position: absolute;
top: 2px;
width: 180px;
border: 1px solid black;
box-shadow: 0 0 10px 0 rgba(0, 0.5, 0, 0);
border-left: none;
border-top: none;
list-style: none;
height: 100px;
overflow: auto;
}
.filterDropdown span.value {
display: none;
}
.filterDropdown dd ul li a {
padding: 5px;
display: block;
}
.filterDropdown dd ul li a:hover {
background-color: #5795f9;
}
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class = "filters">
<div class = "filterBlock city">
<h3>Регіон</h3>
<span class = "filter-ico city"><i class = "fa fa-caret-down" aria-hidden="true"></i></span>
<dl class = "filterDropdown first">
<dt>
<span class = "resultFilter"></span>
<p class = "resultSelect"></p>
</dt>
<dd>
<div class = "multiselect">
<ul>
<li><input type="checkbox" value="Київ">Київ</li>
<li><input type="checkbox" value="Київ">Київ</li>
<li><input type="checkbox" value="Київ">Київ</li>
</ul>
</div>
</dd>
</dl>
</div>
<div class = "filterBlock sphere">
<h3>Сфера діяльності</h3>
<span class = "filter-ico sphere"><i class = "fa fa-caret-down" aria-hidden="true"></i></span>
<dl class = "filterDropdown first">
<dt>
<span class = "resultFilter"></span>
<p class = "resultSelect"></p>
</dt>
<dd>
<div class = "multiselect">
<ul>
<li><input type="checkbox" value="Судова система">Судова система</li>
<li><input type="checkbox" value="Прокуратура">Прокуратура</li>
</ul>
</div>
</dd>
</dl>
</div>
<div class = "filterBlock show">
<h3>Показувати спочатку</h3>
<span class = "filter-ico show"><i class = "fa fa-caret-down" aria-hidden="true"></i></span>
<dl class = "filterDropdown first">
<dt>
<span class = "resultFilter"></span>
<p class = "resultSelect"></p>
</dt>
<dd>
<div class = "multiselect">
<ul>
<li><input type="checkbox" value="Осіб з більшим показником ризику">Осіб з більшим показником ризику</li>
<li><input type="checkbox" value="Осіб з меньшим показником ризику">Осіб з меньшим показником ризику</li>
</ul>
</div>
</dd>
</dl>
</div>
</section>

This is quite a mess. I got it this far, if you want more changes you'll have to specify.
$(".filterBlock .filter-ico").on('click', function() {
$(this).parent().find('dl').toggle('fast');
});
$(".filterDropdown dd ul li a").on('click', function() {
$(this).parent('dl').hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}
$(document).bind('click', function(e) {
var $clicked = $(e.target);
//if (!$clicked.parents().hasClass("filterDropdown")) $(".filterDropdown dd ul").hide();
});
$('.multiselect input[type="checkbox"]').on('click', function() {
var title = $(this).closest('.mutliselect').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";
if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
$('.resultSelect').append(html);
$(".resultFilter").hide();
} else {
$('span[title="' + title + '"]').remove();
var ret = $(".resultFilter");
$('.filterDropdown dt a').append(ret);
}
});
.filters {
width: 20%;
height: 100%;
background-color: #fff;
border-right: 1px solid #f7f7f7;
position: relative;
display: inline-block;
}
.filterBlock {
margin: 0 0 50px 0;
position: relative;
}
.filterBlock h3 {
margin: 30px 0 0 40px;
color: #a6a6a6;
font: 16px Helvetica;
}
.filterBlock .filter-ico {
position: absolute;
left: 100px;
font-size: 25px;
color: #5795f9;
cursor: pointer;
z-index: 10000;
}
.filterBlock .filter-ico.sphere {
left: 190px;
}
.filterBlock .filter-ico.show {
left: 200px;
}
.filterDropdown {
position: absolute;
overflow: hidden;
top: 10px;
left: 20px;
z-index: 5;
display: none;
transform: translateY(-10%);
transform: translateX(10%);
}
.filterDropdown a {
color: #5795f9;
}
.filterDropdown dd,
.filterDropdown dt {
margin: 0px;
padding: 0px;
}
.filterDropdown ul {
margin: -1px 0 0 0;
}
.filterDropdown dd {
position: relative;
}
.filterDropdown a,
.filterDropdown a:visited {
color: #5795f9;
text-decoration: none;
outline: none;
font-size: 12px;
}
/*.filterDropdown dt a {
background-color: #fff;
display: block;
padding: 8px 20px 5px 10px;
min-height: 15px;
line-height: 24px;
overflow: hidden;
border: 0;
width: 152px;
border:1px solid black;
}*/
.filterDropdown dt a span,
.resultSelect span {
cursor: pointer;
display: inline-block;
color: #5795f9;
margin: 0 0 0 20px;
/* padding: 0 6px 2px 0;*/
}
.filterDropdown dd ul {
background-color: #fff;
border: 0;
color: #5795f9;
left: 0px;
padding: 2px 15px 2px 5px;
top: 2px;
width: 180px;
border: 1px solid black;
box-shadow: 0 0 10px 0 rgba(0, 0.5, 0, 0);
border: none;
border-top: none;
list-style: none;
height: 100px;
overflow: auto;
}
.filterDropdown span.value {
display: none;
}
.filterDropdown dd ul li a {
padding: 5px;
display: block;
}
.filterDropdown dd ul li a:hover {
background-color: #5795f9;
}
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class = "filters">
<div class = "filterBlock city">
<h3>Регіон</h3>
<span class = "filter-ico city"><i class = "fa fa-caret-down" aria-hidden="true"></i></span>
<dl class = "filterDropdown first">
<dt>
<span class = "resultFilter"></span>
<p class = "resultSelect"></p>
</dt>
<dd>
<div class = "multiselect">
<ul>
<li><input type="checkbox" value="Київ">Київ</li>
<li><input type="checkbox" value="Київ">Київ</li>
<li><input type="checkbox" value="Київ">Київ</li>
</ul>
</div>
</dd>
</dl>
</div>
<div class = "filterBlock sphere">
<h3>Сфера діяльності</h3>
<span class = "filter-ico sphere"><i class = "fa fa-caret-down" aria-hidden="true"></i></span>
<dl class = "filterDropdown first">
<dt>
<span class = "resultFilter"></span>
<p class = "resultSelect"></p>
</dt>
<dd>
<div class = "multiselect">
<ul>
<li><input type="checkbox" value="Судова система">Судова система</li>
<li><input type="checkbox" value="Прокуратура">Прокуратура</li>
</ul>
</div>
</dd>
</dl>
</div>
<div class = "filterBlock show">
<h3>Показувати спочатку</h3>
<span class = "filter-ico show"><i class = "fa fa-caret-down" aria-hidden="true"></i></span>
<dl class = "filterDropdown first">
<dt>
<span class = "resultFilter"></span>
<p class = "resultSelect"></p>
</dt>
<dd>
<div class = "multiselect">
<ul>
<li><input type="checkbox" value="Осіб з більшим показником ризику">Осіб з більшим показником ризику</li>
<li><input type="checkbox" value="Осіб з меньшим показником ризику">Осіб з меньшим показником ризику</li>
</ul>
</div>
</dd>
</dl>
</div>
</section>

if has no child how to not toggle?

Hi I develop checkbox and I have some issue.if my li parents has no ul child it musn't be toggle. I'm talking about red arrows which is the left of li element.
I got solved problem thanks to #Arun P Johny just one more thing left I have to do is when clicked label checkbox musn't be checked only thoose which has got ul child
see my codeson codepen
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>No Title</title>
</head>
<body>
<div class="new-checkbox">
<ul>
<li class="hasUl">
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li class="hasUl">
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- new checkbox-->
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js" ></script>
</body>
</html>
css
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
li.downCheck:before
{
content: "\25bc" !important;
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
/*
.new-checkbox ul li:before {
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center;
margin-top: 2px;
}
li.downCheck:before{
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important;
margin-top: 2px;
}
*/
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
 
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox li ul {
display: none;
}
.new-checkbox li.has-checked > ul {
display: block;
}
jquery codes
$(document).ready(function() {
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").stop().toggleClass("downCheck");
});
$(".new-checkbox ul li > * li:has(ul)").addClass("downCheck");
});

You can use the has-checked class to style the element, there is no need to have a new class
$(document).ready(function() {
$('.new-checkbox li:has(ul)').addClass('parent');
$('.new-checkbox input[type=checkbox]').on("change", function() {
var checked = this.checked,
$li = $(this).parent();
$li.find('input[type=checkbox]').prop('checked', checked).parent().toggleClass('has-checked', checked);
$li.parentsUntil('.new-checkbox', 'li').each(function() {
var $checks = $(this).find('ul input[type=checkbox]');
$(this).children('input[type=checkbox]').prop('checked', !$checks.filter(':not(:checked)').length);
$(this).toggleClass('has-checked', $checks.is(':checked'));
});
});
});
.new-checkbox ul {
padding: 0;
margin: 0;
list-style: none;
margin-left: 30px;
font: normal 11px/16px"Segoe UI", Arial, Sans-serif;
}
.new-checkbox ul:first-child {
margin-left: 0;
}
.new-checkbox ul li {
margin: 3px 0;
}
.new-checkbox input[type="checkbox"] {
display: none;
}
.new-checkbox label {
cursor: pointer;
}
.new-checkbox input[type="checkbox"] + label:before {
border: 1px solid #ffffff;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 13px;
width: 13px;
margin: 2px .25em 0 0;
padding: 0;
vertical-align: top;
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.new-checkbox input[type="checkbox"]:checked + label:before {
background: #fff;
color: #1375b3;
content: "\2714";
text-align: center;
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
.new-checkbox input[type="checkbox"]:checked + label:after {
font-weight: bold;
}
.new-checkbox ul li:before {
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
li.parent.has-checked:before {
content: "\25bc" !important;
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
cursor: pointer;
}
/*
.new-checkbox ul li:before {
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_right_48px-16.png") no-repeat left center;
margin-top: 2px;
}
li.downCheck:before{
content:"";
width:16px;
height:16px;
display:block;
float:left;
background:url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-16.png") no-repeat left center !important;
margin-top: 2px;
}
*/
.new-checkbox li {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.new-checkbox input[type="checkbox"][id]:checked ~ li::before {
content: "\25bc";
}
.new-checkbox li ul {
display: none;
}
.new-checkbox li.has-checked > ul {
display: block;
}
<script type="text/javascript" src="https://cdn.anitur.com.tr/js/jquery-1.8.2.min.js"></script>
<div class="new-checkbox">
<ul>
<li class="hasUl">
<input type="checkbox" id="input1">
<label for="input1">kategori <strong>(1)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input11">
<label for="input11">kategori<strong>(11)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input12">
<label for="input12">kategori <strong>(12)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input13">
<label for="input13">kategori <strong>(13)</strong>
</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="input2">
<label for="input2">kategori <strong>(2)</strong>
</label>
</li>
<li class="hasUl">
<input type="checkbox" id="input3">
<label for="input3">kategori <strong>(3)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input31">
<label for="input31">kategori <strong>(31)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input32">
<label for="input32">kategori <strong>(32)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input33">
<label for="input33">kategori <strong>(33)</strong>
</label>
<ul>
<li>
<input type="checkbox" id="input331">
<label for="input331">kategori <strong>(331)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input332">
<label for="input332">kategori <strong>(332)</strong>
</label>
</li>
<li>
<input type="checkbox" id="input333">
<label for="input333">kategori <strong>(333)</strong>
</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- new checkbox-->

Replace Code
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li:has(ul)").stop().toggleClass("downCheck");
});
From
$('.new-checkbox li.hasUl input[type="checkbox"]').on("click",function(e) {
$(this).parent("li").stop().toggleClass("downCheck");
});
Codepen Demo

Categories

Resources