Animating the labels on input focus with CSS and JavaScript

Animating the labels on input focus with CSS and JavaScript - javascript

I have a few input fields and I want their labels to scale down and slide at the top on focus. I have managed to achieve this with CSS and JavaScript but it only animates the first label on the page.
The code JS below uses "querySelector" to target the labels. I've also tried using "getElementsByClassName" and "querySelectorAll". What that does is animate all the labels on the page when I focus on just one input field.
I'd like to only animate the label attached to input. Any help with this would be greatly appreciated.
document.addEventListener("change", function(event) {
if (event.target && event.target.matches(".js_form-input")) {
event.preventDefault();
var inputField = event.target;
var inputLabels = document.querySelector(".label-span");
if (inputField.value) {
inputLabels.style.top = "-1.5rem";
} else {
inputLabels.style.top = "0rem";
}
}
});
.input {
width: 100%;
border: 0;
border-bottom: solid 1px grey;
padding-left: 1rem;
margin-bottom: 2rem;
color: $c_pop;
padding-bottom: 0.7rem;
}
.input-label {
position: relative;
}
.label-span {
position: absolute;
top: 0;
left: 1rem;
transition: all 0.2s;
}
.input-label {
font-size: 0.9rem;
}
.input:focus+.label-span {
top: -1.5rem;
left: 0.5rem;
font-size: 0.7rem;
}
<div class="input-container">
<label class="input-label" for="#">
<input class="input js_form-input" type="text">
<span class="label-span">First Name</span>
</label>
</div>
<div class="input-container">
<label class="input-label" for="#">
<input class="input js_form-input" type="text">
<span class="label-span">Surname</span>
</label>
</div>
<div class="input-container">
<label class="input-label" for="#">
<input class="input js_form-input" type="text">
<span class="label-span">Email</span>
</label>
</div>
I've also tried this JS method:
var inputField = event.target;
var inputLabels = document.querySelectorAll(".label-span");
[].slice.call(inputLabels).forEach(function(label){
if (inputField.value) {
label.style.top = "-1.5rem";
} else {
label.style.top = "0rem";
}
});

Your CSS is sufficient to get the affect you are after, just remove the javascript. The only problem that I fixed is adding pointer-events: none; to the .label-span elements as they were blocking focus when clicking on them.
Edited to include a check on blur for whether the input is empty or not and maintain the label position if it is full.
const inputs = document.querySelectorAll('.js_form-input');
inputs.forEach(input => {
input.addEventListener('blur', (event) => {
if (event.target.value.length) {
event.target.classList.add("full");
} else {
event.target.classList.remove("full");
}
});
})
#container {
padding: 2rem 0;
}
.input {
width: 100%;
border: 0;
border-bottom: solid 1px grey;
padding-left: 1rem;
margin-bottom: 2rem;
color: $c_pop;
padding-bottom: 0.7rem;
}
.input-label {
position: relative;
}
.label-span {
position: absolute;
top: 0;
left: 1rem;
transition: all 0.2s;
pointer-events: none;
}
.input-label {
font-size: 0.9rem;
}
.input:focus+.label-span, .input.full+.label-span {
top: -1.5rem;
left: 0.5rem;
font-size: 0.7rem;
}
<div id="container">
<div class="input-container">
<label class="input-label" for="#">
<input class="input js_form-input" type="text">
<span class="label-span">First Name</span>
</label>
</div>
<div class="input-container">
<label class="input-label" for="#">
<input class="input js_form-input" type="text">
<span class="label-span">Surname</span>
</label>
</div>
<div class="input-container">
<label class="input-label" for="#">
<input class="input js_form-input" type="text">
<span class="label-span">Email</span>
</label>
</div>
</div>

I hope, This will solve your problem.
var myform = document.querySelectorAll(".input-label");
Array.from(myform).map(x => {
x.addEventListener('change', (e) => {
var el = e.target.parentNode.children[1];
if (e.target.value !== "") {
el.style.top = "-1.5rem";
} else {
el.style.top = "0rem";
}
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.input-container {
padding: 20px;
}
.input {
width: 100%;
border: 0;
border-bottom: solid 1px grey;
padding-left: 1rem;
margin-bottom: 2rem;
color: #000;
padding-bottom: 0.7rem;
}
.input-label {
position: relative;
}
.label-span {
position: absolute;
top: 0;
left: 1rem;
transition: all 0.2s;
}
.input-label {
font-size: 0.9rem;
}
.input:focus+.label-span {
top: -1.5rem;
left: 0.5rem;
font-size: 0.7rem;
}
<div class="input-container">
<label class="input-label" for="#">
<input class="input js_form-input" type="text" />
<span class="label-span">First Name</span>
</label>
</div>
<div class="input-container">
<label class="input-label" for="#">
<input class="input js_form-input" type="text" />
<span class="label-span">Surname</span>
</label>
</div>
<div class="input-container">
<label class="input-label" for="#">
<input class="input js_form-input" type="text" />
<span class="label-span">Email</span>
</label>
</div>

Another trick to achieve same result without Javascript.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.input-container {
padding: 20px;
}
.input {
width: 100%;
border: 0;
border-bottom: solid 1px grey;
padding-left: 1rem;
margin-bottom: 2rem;
color: #000;
padding-bottom: 0.7rem;
}
.input-label {
position: relative;
}
.label-span {
position: absolute;
top: 0;
left: 1rem;
transition: all 0.2s;
}
.input-label {
font-size: 0.9rem;
}
.input:focus + .label-span,
.input:valid + .label-span {
top: -1.5rem;
left: 0.5rem;
font-size: 0.9rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div class="input-container">
<label class="input-label" for="#">
<input class="input js_form-input" type="text" required />
<span class="label-span">First Name</span>
</label>
</div>
<div class="input-container">
<label class="input-label" for="#">
<input class="input js_form-input" type="text" required/>
<span class="label-span">Surname</span>
</label>
</div>
<div class="input-container">
<label class="input-label" for="#">
<input class="input js_form-input" type="text" required/>
<span class="label-span">Email</span>
</label>
</div>
</body>
</html>

Related

How to make accordion doesn't work and tell me Cannot read property 'classList' of undefined if element existed?

This is what I have at the moment. This code doesn't work as it should.
I need to make that - if I press for header element section must disappear, when I press again it must appear. I don't understand why it tells me that element undefined if it existed in HTML.... Can anyone help me with this problem please?
var filterTrigger = document.querySelectorAll('.catalog__filter-form h3');
var filterSection = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');
for (var j = 0; j < filterTrigger.length; j++) {
filterInputs[j].classList.add('filter-hidden');
filterTrigger[j].addEventListener('click', function(evt) {
evt.preventDefault();
filterSection[j].classList.toggle('catalog__filter-section--opened');
filterInputs[j].classList.toggle('filter-visible');
});
}
.catalog__container {
max-width: 1366px;
margin: 0 auto;
}
.catalog__content-container {
margin-left: 7.2%;
margin-right: 7.2%;
margin-top: 91px;
}
.catalog__filter-form {
border: 1px solid brown;
width: 248px;
}
.catalog__filter-form h3 {
font-family: arial;
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: black;
margin: 0;
padding-top: 22px;
padding-bottom: 23px;
padding-left: 24px;
}
.catalog__filter-section {
padding-left: 24px;
border-bottom: 1px solid brown;
position: relative;
}
.catalog__filter-section::after {
content: "";
position: absolute;
right: 22px;
top: -38px;
background-image: url("../img/arrow-down-icon.svg");
background-repeat: no-repeat;
width: 18px;
height: 12px;
}
.catalog__filter-section--opened::after {
background-image: url("../img/arrow-up-icon.svg")
}
.catalog__filter-section:last-child {
border: none;
}
.catalog__filter-inputs {
display: flex;
flex-direction: column;
display: flex;
padding-bottom: 13px;
}
.catalog__filter-section label {
font-family: arial;
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: black;
padding-left: 25px;
position: relative;
margin-bottom: 13px;
}
.catalog__filter-section input {
appearance: none;
}
.catalog__filter-section input:checked+span {
background-color: brown;
}
.catalog__filter-section span {
position: absolute;
width: 15px;
height: 15px;
left: 10px;
top: 2px;
border: 1px solid brown;
background-color: white;
}
.filter-hidden {
display: none;
}
.filter-visible {
display: flex;
}
<form class="catalog__filter-form">
<h3>Product</h3>
<div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
<div class="catalog__filter-inputs filter-visible">
<label>
<input type="checkbox" name="products" value="Necklaces" checked>
<span></span>
Necklaces
</label>
<label>
<input type="checkbox" name="products" value="Chokers" checked>
<span></span>
Chokers
</label>
<label>
<input type="checkbox" name="products" value="Rings">
<span></span>
Rings
</label>
<label>
<input type="checkbox" name="products" value="Earrings" checked>
<span></span>
Earrings
</label>
</div>
</div>
<h3>Material</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="material" value="Gold">
<span></span>
Gold
</label>
<label>
<input type="checkbox" name="material" value="Silver">
<span></span>
Silver
</label>
</div>
</div>
<h3>Collection</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="collection" value="Pink flamingo">
<span></span>
Pink flamingo
</label>
<label>
<input type="checkbox" name="collection" value="Dreams">
<span></span>
Dreams
</label>
</div>
</div>
<h3>Price</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="products" value="Necklaces">
Necklaces
</label>
</div>
</div>
</form>
</div>

because function run when you click on h3 to hide child and at that time j will be 4.
you most create a const variable and store element in it.
var filterTrigger = document.querySelectorAll('.catalog__filter-form h3');
var filterSection = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');
function onClick(event, secEl, inpEl){
event.preventDefault();
secEl.classList.toggle('catalog__filter-section--opened');
inpEl.classList.toggle('filter-visible');
}
for (var j = 0; j < filterTrigger.length; j++) {
const secEl = filterSection[j]
const inpEl = filterInputs[j]
filterInputs[j].classList.add('filter-hidden');
filterTrigger[j].addEventListener('click', function(e){ onClick(e, secEl, inpEl) });
}
.catalog__container {
max-width: 1366px;
margin: 0 auto;
}
.catalog__content-container {
margin-left: 7.2%;
margin-right: 7.2%;
margin-top: 91px;
}
.catalog__filter-form {
border: 1px solid brown;
width: 248px;
}
.catalog__filter-form h3 {
font-family: arial;
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: black;
margin: 0;
padding-top: 22px;
padding-bottom: 23px;
padding-left: 24px;
}
.catalog__filter-section {
padding-left: 24px;
border-bottom: 1px solid brown;
position: relative;
}
.catalog__filter-section::after {
content: "";
position: absolute;
right: 22px;
top: -38px;
background-image: url("../img/arrow-down-icon.svg");
background-repeat: no-repeat;
width: 18px;
height: 12px;
}
.catalog__filter-section--opened::after {
background-image: url("../img/arrow-up-icon.svg")
}
.catalog__filter-section:last-child {
border: none;
}
.catalog__filter-inputs {
display: flex;
flex-direction: column;
display: flex;
padding-bottom: 13px;
}
.catalog__filter-section label {
font-family: arial;
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: black;
padding-left: 25px;
position: relative;
margin-bottom: 13px;
}
.catalog__filter-section input {
appearance: none;
}
.catalog__filter-section input:checked+span {
background-color: brown;
}
.catalog__filter-section span {
position: absolute;
width: 15px;
height: 15px;
left: 10px;
top: 2px;
border: 1px solid brown;
background-color: white;
}
.filter-hidden {
display: none;
}
.filter-visible {
display: flex;
}
<form class="catalog__filter-form">
<h3>Product</h3>
<div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
<div class="catalog__filter-inputs filter-visible">
<label>
<input type="checkbox" name="products" value="Necklaces" checked>
<span></span>
Necklaces
</label>
<label>
<input type="checkbox" name="products" value="Chokers" checked>
<span></span>
Chokers
</label>
<label>
<input type="checkbox" name="products" value="Rings">
<span></span>
Rings
</label>
<label>
<input type="checkbox" name="products" value="Earrings" checked>
<span></span>
Earrings
</label>
</div>
</div>
<h3>Material</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="material" value="Gold">
<span></span>
Gold
</label>
<label>
<input type="checkbox" name="material" value="Silver">
<span></span>
Silver
</label>
</div>
</div>
<h3>Collection</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="collection" value="Pink flamingo">
<span></span>
Pink flamingo
</label>
<label>
<input type="checkbox" name="collection" value="Dreams">
<span></span>
Dreams
</label>
</div>
</div>
<h3>Price</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="products" value="Necklaces">
Necklaces
</label>
</div>
</div>
</form>
</div>

It was not trivial, but here you are
Added trigger class to the trigger h3
Close all on load
Delegate from the container div
Add some missing html (spans to the last checkbox)
var filterSections = document.querySelectorAll('.catalog__filter-section');
var filterInputs = document.querySelectorAll('.catalog__filter-inputs');
const closeAll = () => {
filterInputs.forEach((inp, i) => inp.classList.add('filter-hidden'));
filterSections.forEach((section, i) => section.classList.remove('catalog__filter-section--opened'));
}
closeAll()
document.getElementById("container").addEventListener("click", function(e) {
const tgt = e.target;
if (!tgt.classList.contains("trigger")) return
const filterSection = tgt.nextElementSibling;
const filterInput = filterSection.querySelector(".catalog__filter-inputs");
closeAll();
filterSection.classList.toggle('catalog__filter-section--opened');
filterInput.classList.toggle('filter-visible');
});
.catalog__container {
max-width: 1366px;
margin: 0 auto;
}
.catalog__content-container {
margin-left: 7.2%;
margin-right: 7.2%;
margin-top: 91px;
}
.catalog__filter-form {
border: 1px solid brown;
width: 248px;
}
.catalog__filter-form h3 {
font-family: arial;
font-size: 16px;
font-weight: 500;
line-height: 21px;
color: black;
margin: 0;
padding-top: 22px;
padding-bottom: 23px;
padding-left: 24px;
}
.catalog__filter-section {
padding-left: 24px;
border-bottom: 1px solid brown;
position: relative;
}
.catalog__filter-section::after {
content: "";
position: absolute;
right: 22px;
top: -38px;
background-image: url("../img/arrow-down-icon.svg");
background-repeat: no-repeat;
width: 18px;
height: 12px;
}
.catalog__filter-section--opened::after {
background-image: url("../img/arrow-up-icon.svg")
}
.catalog__filter-section:last-child {
border: none;
}
.catalog__filter-inputs {
display: flex;
flex-direction: column;
display: flex;
padding-bottom: 13px;
}
.catalog__filter-section label {
font-family: arial;
font-size: 14px;
font-weight: 500;
line-height: 18px;
color: black;
padding-left: 25px;
position: relative;
margin-bottom: 13px;
}
.catalog__filter-section input {
appearance: none;
}
.catalog__filter-section input:checked+span {
background-color: brown;
}
.catalog__filter-section span {
position: absolute;
width: 15px;
height: 15px;
left: 10px;
top: 2px;
border: 1px solid brown;
background-color: white;
}
.filter-hidden {
display: none;
}
.filter-visible {
display: flex;
}
<div id="container">
<form class="catalog__filter-form">
<h3>Product</h3>
<div class="catalog__filter-section catalog__filter-section--opened" tabindex="0">
<div class="catalog__filter-inputs filter-visible">
<label>
<input type="checkbox" name="products" value="Necklaces" checked>
<span></span>
Necklaces
</label>
<label>
<input type="checkbox" name="products" value="Chokers" checked>
<span></span>
Chokers
</label>
<label>
<input type="checkbox" name="products" value="Rings">
<span></span>
Rings
</label>
<label>
<input type="checkbox" name="products" value="Earrings" checked>
<span></span>
Earrings
</label>
</div>
</div>
<h3 class="trigger">Material</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="material" value="Gold">
<span></span>
Gold
</label>
<label>
<input type="checkbox" name="material" value="Silver">
<span></span>
Silver
</label>
</div>
</div>
<h3 class="trigger">Collection</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="collection" value="Pink flamingo">
<span></span>
Pink flamingo
</label>
<label>
<input type="checkbox" name="collection" value="Dreams">
<span></span>
Dreams
</label>
</div>
</div>
<h3 class="trigger">Price</h3>
<div class="catalog__filter-section" tabindex="0">
<div class="catalog__filter-inputs">
<label>
<input type="checkbox" name="products" value="Necklaces">
<span></span>
Necklaces
</label>
</div>
</div>
</form>
</div>

Hide and Display the div after selecting the radio button

I have a form with cheque and cash radio button and cheque radio is default checked. I also set, If the cheque is checked than displaying the input field. If cash is checked then hide the input field.
I check in the inspect elements, Event is working when selecting the cash but input fields are not hiding when cash is selected.
My issue got resolved using Nisarg Shah answer. Now I tried to submit the form but I am getting the value of cheque radio button but I am not getting the value of cash. Getting errorUndefined index: mode_of_payment
if (isset($_POST['submit'])) {
$status=$_POST['mode_of_payment'];
echo $status;
}
would you help me out in this?
$('label.mode_of_payment').click(function(){
$('input[type=radio]').attr('checked',null);
$('label.mode_of_payment').removeClass("checked");
$(this).prev().attr('checked',"checked");
$(this).addClass("checked");
})
$('#subject_section').change(function() {
if ($('#display_cheque').attr('checked')) {
$('#display_cheque_field').hide();
} else {
$('#display_cheque_field').show();
}
});
.radio-border{
border:1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half{
width: 75px;
}
input[type=radio]
{
display: none;
}
input[type=radio]:checked + label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked{
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms ;
}
#display_cheque_field
{
margin-top: 10px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none">
<label class="mode_of_payment">Cash</label>
</div>
</div><!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>

You can't bind to the change event on the entire form, and you don't need to. Since you have already defined a click event to handle checking-unchecking of the radio buttons, you can hide/show the inputs along with them. Your modified event handler could be like this:
$('label.mode_of_payment').click(function() {
$('input[type=radio]').prop('checked', false);
$('label.mode_of_payment').removeClass("checked");
$(this).prev().prop('checked', true);
$(this).addClass("checked");
if (!$('#display_cheque').prop('checked')) {
$('#display_cheque_field').hide();
} else {
$('#display_cheque_field').show();
}
})
$('label.mode_of_payment').click(function() {
$('input[type=radio]').prop('checked', false);
$('label.mode_of_payment').removeClass("checked");
$(this).prev().prop('checked', true);
$(this).addClass("checked");
if (!$('#display_cheque').prop('checked')) {
$('#display_cheque_field').hide();
} else {
$('#display_cheque_field').show();
}
})
.radio-border {
border: 1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half {
width: 75px;
}
input[type=radio] {
display: none;
}
input[type=radio]:checked+label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms;
}
#display_cheque_field {
margin-top: 10px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none">
<label class="mode_of_payment">Cash</label>
</div>
</div>
<!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>

You can use below code. Here I have added click event on div of radio button and handled radio button change functionality there itself
$(document).on('click', '.radio-width-half',function() {
debugger;
$("input[name=mode_of_payment]",this).prop("checked",true);
//console.log("radio name = "+$("input[name=mode_of_payment]",this).attr('id'));
if($('#display_cheque').is(":checked"))
{
$('#display_cheque_field').show();
}
else{
$('#display_cheque_field').hide();
}
});
.radio-border{
border:1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half{
width: 75px;
}
input[type=radio]
{
display: none;
}
input[type=radio]:checked + label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked{
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms ;
}
#display_cheque_field
{
margin-top: 10px;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none" id="display_cash">
<label class="mode_of_payment">Cash</label>
</div>
</div><!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>

Try this. I have added this css for custom radio not require to use jQuery for this and also added jQuery for show and hide display_cheque_field.
.radio-width-half{
position: relative;
}
input[type="radio"] {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
width: 100%;
}
$("input[type=radio]").click(function () {
if($('#display_cheque')[0].checked) {
$("#display_cheque_field").css('display' ,'block');
}
else{
$("#display_cheque_field").css('display' ,'none');
}
});
.radio-border{
border:1px solid #000;
width: 150px;
border-radius: 30px;
text-align: center;
display: flex;
}
.radio-width-half{
width: 75px;
position: relative;
}
input[type="radio"] {
height: 100%;
left: 0;
opacity: 0;
position: absolute;
width: 100%;
}
input[type=radio]:checked + label {
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
.checked{
background-color: #00a2ff;
border-radius: 30px;
display: block;
color: #fff;
}
label.mode_of_payment {
display: block;
padding: 8px;
transition: all 300ms ;
}
#display_cheque_field
{
margin-top: 10px;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<form action="#" method="post" name="subject_section">
<div class="radio-border">
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="1" class="display-none" id="display_cheque" checked>
<label class="mode_of_payment">Cheque</label>
</div>
<div class="radio-width-half">
<input type="radio" name="mode_of_payment" value="0" class="display-none">
<label class="mode_of_payment">Cash</label>
</div>
</div>
<!--radio border-->
<div id="display_cheque_field">
<input type="text" name="cheque_number" class="form-control" id="cheque_number" placeholder="Cheque number">
<input type="text" name="drawee_bank" class="form-control" id="drawee_bank" placeholder="Bank">
</div>
<input type="submit" name="submit" value="submit">
</form>

jQuery add .css() if input value changes

I have a set of dynamic inputs and want to add css of parent element if a value entered is higher then 0.
$(document).ready(function() {
$(function() {
$('.plus').on('click', function() {
var $qty = $(this).prev('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal)) {
$qty.val(currentVal + 1);
}
});
$('.minus').on('click', function() {
var $qty = $(this).next('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal) && currentVal > 0) {
$qty.val(currentVal - 1);
}
});
});
$('document').on('change', 'input', function() {
if ($(this).val() > 0) {
$(this).closest('.inputBox').css('opacity', '1');
};
});
if ($('input').val() !== 0) {
$(this).closest('.inputBox').css('opacity', '1');
};
});
body {
font-family: 'Montserrat';
font-size: 100%;
}
.roomWrap {
display: flex;
flex-wrap: wrap;
}
.inputBox {
width: 50%;
border: 2px solid black;
max-width: 350px;
font-size: 1.8vw;
text-transform: uppercase;
font-weight: 500;
margin: 5px;
box-sizing: border-box;
padding: 22px 0px 22px 20px;
opacity: 0.2;
cursor: pointer !important;
}
.inputBox laber {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: pointer;
}
span.inputInner {
margin-left: 30px;
display: inline-block;
float: right;
padding-right: 20px;
/* padding-bottom: 20px; */
position: relative;
top: -8px;
/* height: 100%; */
}
.inputInner a {
cursor: pointer;
font-size: 3.8vw;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
top: -4px;
}
input {
width: 60px;
border: none;
text-align: center;
font-size: 3.8vw;
outline: none;
vertical-align: ;
position: relative;
top: -5px;
font-weight: 600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputBox">
<label for="sofa">
Sofa
<span class="inputInner">
<a class="minus">-</a>
<input name="sofa" value="0">
<a class="plus">+</a>
</span>
</label>
</div>
<div class="inputBox">
<label for="table">
Sofa
<span class="inputInner">
<a class="minus">-</a>
<input name="table" value="0">
<a class="plus">+</a>
</span>
</label>
</div>
<div class="inputBox">
<label for="piano">
Sofa
<span class="inputInner">
<a class="minus">-</a>
<input name="piano" value="0">
<a class="plus">+</a>
</span>
</label>
</div>
But I can't make it work. Could you please suggest what's wrong?
Here's the whole code: https://jsfiddle.net/dr7z7tkf/1/

To achieve what you need you should trigger a change event on the input after updating its value.
You also need to change $('document') to $(document). There's also no need for nested document.ready event handlers, as you can place all logic within a single one.
Finally, you can both DRY up and improve the logic by using a single click handler on the incrementing a elements, like this:
$(function() {
$('.plus, .minus').on('click', function() {
var $btn = $(this);
$btn.siblings('input').val(function(i, v) {
var newV = (parseInt(v, 10) || 0) + $btn.data('inc');
return newV >= 0 ? newV : v;
}).change();
});
$(document).on('change', 'input', function() {
$(this).closest('.inputBox').toggleClass('foo', parseInt(this.value, 10) > 0);
}).change();
});
body {
font-family: 'Montserrat';
font-size: 100%;
}
.roomWrap {
display: flex;
flex-wrap: wrap;
}
.inputBox {
width: 50%;
border: 2px solid black;
max-width: 350px;
font-size: 1.8vw;
text-transform: uppercase;
font-weight: 500;
margin: 5px;
box-sizing: border-box;
padding: 22px 0px 22px 20px;
opacity: 0.2;
cursor: pointer !important;
}
.inputBox laber {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: pointer;
}
span.inputInner {
margin-left: 30px;
display: inline-block;
float: right;
padding-right: 20px;
/* padding-bottom: 20px; */
position: relative;
top: -8px;
/* height: 100%; */
}
.inputInner a {
cursor: pointer;
font-size: 3.8vw;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
top: -4px;
text-decoration: none;
}
input {
width: 60px;
border: none;
text-align: center;
font-size: 3.8vw;
outline: none;
vertical-align: ;
position: relative;
top: -5px;
font-weight: 600;
}
.foo {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputBox">
<label for="sofa">
Sofa
<span class="inputInner">
-
<input name="sofa" value="0">
+
</span>
</label>
</div>
<div class="inputBox">
<label for="table">
Table
<span class="inputInner">
-
<input name="table" value="0">
+
</span>
</label>
</div>
<div class="inputBox">
<label for="piano">
Piano
<span class="inputInner">
-
<input name="piano" value="0">
+
</span>
</label>
</div>

You need to trigger the change event while clicking on the + and - .Parse the input value on change event
$(document).ready(function() {
$(function() {
$('.plus').on('click', function() {
var $qty = $(this).prev('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal)) {
$qty.val(currentVal + 1);
}
$('input').trigger('change')
});
$('.minus').on('click', function() {
var $qty = $(this).next('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal) && currentVal > 0) {
$qty.val(currentVal - 1);
}
$('input').trigger('change')
});
});
$(document).on('change', 'input', function() {
if (parseInt($(this).val()) > 0) {
$(this).closest('.inputBox').css('opacity', '1');
}else{
$(this).closest('.inputBox').css('opacity', '0.2');
}
});
if ($('input').val() !== 0) {
$(this).closest('.inputBox').css('opacity', '1');
};
});
body {
font-family: 'Montserrat';
font-size: 100%;
}
.roomWrap {
display: flex;
flex-wrap: wrap;
}
.inputBox {
width: 50%;
border: 2px solid black;
max-width: 350px;
font-size: 1.8vw;
text-transform: uppercase;
font-weight: 500;
margin: 5px;
box-sizing: border-box;
padding: 22px 0px 22px 20px;
opacity: 0.2;
cursor: pointer !important;
}
.inputBox laber {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: pointer;
}
span.inputInner {
margin-left: 30px;
display: inline-block;
float: right;
padding-right: 20px;
/* padding-bottom: 20px; */
position: relative;
top: -8px;
/* height: 100%; */
}
.inputInner a {
cursor: pointer;
font-size: 3.8vw;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
top: -4px;
}
input {
width: 60px;
border: none;
text-align: center;
font-size: 3.8vw;
outline: none;
vertical-align: ;
position: relative;
top: -5px;
font-weight: 600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="roomWrap">
<div class="inputBox">
<label for="bookshelf">Bookshelf<span class="inputInner"><a class="minus">-</a><input name="bookshelf" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="sofa">Sofa<span class="inputInner"><a class="minus">-</a><input name="sofa" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="love seat">Love seat<span class="inputInner"><a class="minus">-</a><input name="love seat" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="lamp">Lamp<span class="inputInner"><a class="minus">-</a><input name="lamp" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="book-box">Book box<span class="inputInner"><a class="minus">-</a><input name="book-box" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="armoir">Armoir<span class="inputInner"><a class="minus">-</a><input name="armoir" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="grand-piano">Grand piano<span class="inputInner"><a class="minus">-</a><input name="grand-piano" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="upright-piano">Upright piano<span class="inputInner"><a class="minus">-</a><input name="upright-piano" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="TV">TV<span class="inputInner"><a class="minus">-</a><input name="TV" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="TV-stand">TV stand<span class="inputInner"><a class="minus">-</a><input name="TV-stand" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="coffee-table">Coffee table<span class="inputInner"><a class="minus">-</a><input name="coffee-table" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="desk">Desk<span class="inputInner"><a class="minus">-</a><input name="desk" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="lamp">Lamp<span class="inputInner"><a class="minus">-</a><input name="lamp" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="plant">Plant<span class="inputInner"><a class="minus">-</a><input name="plant" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="mirror">Mirror<span class="inputInner"><a class="minus">-</a><input name="mirror" value="0"><a class="plus">+</a></span></label>
</div>
<div class="inputBox">
<label for="picture">Picture<span class="inputInner"><a class="minus">-</a><input name="picture" value="0"><a class="plus">+</a></span></label>
</div>
</div>

When you change the value programatically, the change event never fires, you have to trigger it manually when you click the buttons, and change the value
$qty.val(currentVal + 1).trigger('change');
FIDDLE

$qty.trigger('change') and secure the input event $(document).on('input change')
$(document).ready(function() {
$(function() {
$('.plus').on('click', function() {
var $qty = $(this).prev('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal)) {
$qty.val(currentVal + 1);
$qty.trigger('change');
}
});
$('.minus').on('click', function() {
var $qty = $(this).next('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal) && currentVal > 0) {
$qty.val(currentVal - 1);
$qty.trigger('change');
}
});
});
$(document).on('input change', 'input', function() {
if ($(this).val() > 0) {
$(this).closest('.inputBox').css('opacity', '1');
};
});
if ($('input').val() !== 0) {
$(this).closest('.inputBox').css('opacity', '1');
};
});
body {
font-family: 'Montserrat';
font-size: 100%;
}
.roomWrap {
display: flex;
flex-wrap: wrap;
}
.inputBox {
width: 50%;
border: 2px solid black;
max-width: 350px;
font-size: 1.8vw;
text-transform: uppercase;
font-weight: 500;
margin: 5px;
box-sizing: border-box;
padding: 22px 0px 22px 20px;
opacity: 0.2;
cursor: pointer !important;
}
.inputBox laber {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: pointer;
}
span.inputInner {
margin-left: 30px;
display: inline-block;
float: right;
padding-right: 20px;
/* padding-bottom: 20px; */
position: relative;
top: -8px;
/* height: 100%; */
}
.inputInner a {
cursor: pointer;
font-size: 3.8vw;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
position: relative;
top: -4px;
}
input {
width: 60px;
border: none;
text-align: center;
font-size: 3.8vw;
outline: none;
vertical-align: ;
position: relative;
top: -5px;
font-weight: 600;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputBox">
<label for="sofa">
Sofa
<span class="inputInner">
<a class="minus">-</a>
<input name="sofa" value="0">
<a class="plus">+</a>
</span>
</label>
</div>
<div class="inputBox">
<label for="table">
Sofa
<span class="inputInner">
<a class="minus">-</a>
<input name="table" value="0">
<a class="plus">+</a>
</span>
</label>
</div>
<div class="inputBox">
<label for="piano">
Sofa
<span class="inputInner">
<a class="minus">-</a>
<input name="piano" value="0">
<a class="plus">+</a>
</span>
</label>
</div>

change the javascript to this and try:
$(document).ready(function() {
$(function() {
$('.plus').on('click', function() {
var $qty = $(this).prev('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal)) {
$qty.val(currentVal + 1);
$qty.closest('.inputBox').css('opacity', '1');
}
});
$('.minus').on('click', function() {
var $qty = $(this).next('input');
var currentVal = parseInt($qty.val());
if (!isNaN(currentVal) && currentVal > 0) {
$qty.val(currentVal - 1);
}
});
});
});
I don't really know why your code didn't work, because I saw a design problem at first sight. It was this: you made the onclick function, and then an onchange function. But, isn't it true that if you click the + or the - button you're also changing the value? So, I just put the function that changed the opacity ($qty.closest('.inputBox').css('opacity', '1');) inside of the function executed when you click the + button.

How to use radio buttons to make a div visible with javascript

I'm trying to make this accordion be a selector for some items. So a quick break down so if a button is pressed (which is really a radio button) then the panel below it makes one of the three choices visible. They each have a class called invisible which makes them hidden and I want to make which ever one equals the id of the selected radio button visible.
Picture Example
For some reason however they are not invisible and only one is showing is it something to do with the accordion JavaScript I have?
HTML
<div id="pricing_holder">
<button class="accordion">
<h2 class="text-center">Screen Type</h2></button>
<div class="panel text-center" id="type_panel">
<label class="icon-select">
<input type="radio" name="type" id="laptop_button" /> <img src="https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-laptop-4.png&r=0&g=0&b=0" alt="laptop"> </label>
<label class="icon-select">
<input type="radio" name="type" id="tablet_button" /> <img src="https://iconmonstr.com/wp-content/g/gd/makefg.php?i=../assets/preview/2012/png/iconmonstr-tablet-1.png&r=0&g=0&b=0" alt="tablet"> </label>
<label class="icon-select">
<input type="radio" name="type" id="phone_button" /> <img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-smartphone-4.png" alt="phone"> </label>
</div>
<button class="accordion">
<h2 class="text-center">Model</h2></button>
<div class="panel invisible" id="laptop_panel">
<div id="col1">
<label class="control control--radio">LAPTOP
<input type="radio" name="radio-laptop" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">LAPTOP2
<input type="radio" name="radio-laptop" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">LAPTOP3
<input type="radio" name="radio-laptop" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel invisible" id="tablet_panel">
<div id="col1">
<label class="control control--radio">TABLET1
<input type="radio" name="radio-tablet" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">TABLET2
<input type="radio" name="radio-tablet" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">TABLET3
<input type="radio" name="radio-tablet" />
<div class="control__indicator"></div>
</label>
</div>
</div>
<div class="panel invisible" id="phone_panel">
<div id="col1">
<label class="control control--radio">iPhone 3
<input type="radio" name="radio-phone" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col3">
<label class="control control--radio">Microsoft Lumia 430
<input type="radio" name="radio-phone" />
<div class="control__indicator"></div>
</label>
</div>
<div id="col2">
<label class="control control--radio">Galaxy S3
<input type="radio" name="radio-phone" />
<div class="control__indicator"></div>
</label>
</div>
</div>
</div>
CSS
#pricing_holder {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}
.icon-select {
margin-right: 20px;
margin-left: 20px;
}
#col1 {
float: left;
width: 285px;
height: 65px;
}
#col2 {
float: none;
height: 65px;
overflow: hidden;
display: table-cell;
}
#col3 {
float: right;
height: 65px;
}
button.accordion {
background-color: #ffffff;
color: #444;
cursor: pointer;
padding: 12px;
width: 75%;
text-align: left;
outline: none;
transition: 0.4s;
border-left: 1px solid grey;
border-right: 1px solid grey;
border-top: 1px solid grey;
border-radius: 4px;
border-bottom: none;
}
button.accordion.active,
button.accordion:hover {
background-color: #6fdd7a;
color: #ffffff;
}
div.panel {
padding: 0px 18px;
background-color: #ffffff;
max-height: 0;
overflow: hidden;
width: 71%;
display: block;
transition: max-height 0.2s ease-out;
border: 1px solid grey;
}
label > input {
visibility: hidden;
position: absolute;
}
label > input + img {
cursor: pointer;
border: 2px solid transparent;
border-radius: 2px;
-webkit-transition: all 0.25s linear;
}
label > input:checked + img {
background-color: #6fdd7a;
}
.invisible {
display: none;
}
.control {
font-size: 18px;
position: relative;
display: block;
margin-bottom: 15px;
padding-left: 30px;
cursor: pointer;
}
.control input {
position: absolute;
z-index: -1;
opacity: 0;
}
.control__indicator {
position: absolute;
top: 2px;
left: 0;
width: 20px;
height: 20px;
background: #e6e6e6;
}
.control--radio .control__indicator {
border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
background: #ccc;
}
.control input:checked ~ .control__indicator {
background: #6fdd7a;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
background: #6fdd7a;
}
.control__indicator:after {
position: absolute;
display: none;
content: '';
}
.control input:checked ~ .control__indicator:after {
display: block;
}
.control--checkbox .control__indicator:after {
top: 4px;
left: 8px;
width: 3px;
height: 8px;
transform: rotate(45deg);
border: solid #fff;
border-width: 0 2px 2px 0;
}
.control--checkbox input:disabled ~ .control__indicator:after {
border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
top: 7px;
left: 7px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
background: #7b7b7b;
}
JS
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
var typeselect = $("input[name='type']:checked").attr('id');
$("laptop_button").click(function(){
$("laptop_panel").toggleClass("invisible");
});
$("tablet_button").click(function(){
$("tablet_panel").toggleClass("invisible");
});
$("phone_button").click(function(){
$("phone_panel").toggleClass("invisible");
});
JSFIDDLE: https://jsfiddle.net/4crj2ash/

Hiding only one element inside div

I want to hide the form inside the filter section without hiding title.
I tried to add form tag:
$(this).parents('.filter-section form').toggle("slideUp");
But it's not working.
Here is a fiddle
$('.filter-section .filter-toggle').click(function() {
$(this).parents('.filter-section').toggle("slideUp");
});

You can do it by using $(this).next('form').toggle("slideUp"); :
The updated JSFIDDLE.
$('.filter-section .filter-toggle').click(function() {
$(this).next('form').toggle("slideUp");
});
/*filter*/
.filter {
border-radius: 5px;
border: solid 1px #008db0;
padding: 20px;
background: #fff;
}
.filter-section {
border-bottom: solid #000 1px;
padding: 10px 0 10px 0;
}
.filter-title {
font-size: 20px;
font-weight: 900;
}
.filter input[type=checkbox] {
margin-right: 8px;
}
.filter-section:last-child {
border-bottom: 0;
}
.filter-section:first-child {
padding: 0 0 10px 0;
margin-top: -10px;
}
.filter .rating span {
position: absolute;
top: 0px;
right: 70px;
}
.filter .rating span:before {
color: gold;
font-size: 23px;
}
.filter .badge {
background: #008db0;
padding: 2px 2px;
font-weight: normal;
font-size: 12px;
border: solid 2px #fff;
border-radius: 15px;
box-shadow: 2px 0px 1px rgba(0, 0, 0, 0.39);
margin: 0;
}
.filter-section form .badge {
background: #f87e47;
padding: 3px 1px;
margin-right: 6px;
}
.filter .more {
color: #000;
font-weight: normal;
font-size: 15px;
float: right;
margin: 12px 0 0;
}
#amount-min {
border: 0;
color: #f6931f;
font-weight: bold;
}
#amount-max {
border: 0;
color: #f6931f;
font-weight: bold;
text-align: right
}
.ranger input {
width: 78px;
}
.ranger {
display: flex;
}
.ui-slider-handle {
border-radius: 10px;
left: 60%;
}
.ui-slider-range {
background: #ff7400;
}
.filter-toggle {
cursor: pointer;
}
.filter-toggle:after {
float: right;
content: "\f107";
font-family: 'FontAwesome';
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css' />
<script src='https://use.fontawesome.com/0e9115ffee.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js'></script>
<div class="row">
<div class="col-md-2 filter">
<div class="filter-section">
<p class="filter-title">Etoiles</p>
<p class="rating rating-5star"><span></span>
</p>
</div>
<div class="filter-section">
<p class="filter-title filter-toggle">Budget</p>
<form action="" class="form">
<p class="ranger">
<input type="text" id="amount-min" />
<input type="text" id="amount-max" />
</p>
<div id="slider-range"></div>
</form>
</div>
<div class="filter-section">
<p class="filter-title filter-toggle">Arrangement</p>
<form id="arrangementfilter" action="">
<input type="checkbox" name="arrangement" value="demi-pension" /><span class="badge">157</span>Logement Petit Dejeuner</br>
<input type="checkbox" name="arrangement" value="demi-pension" /><span class="badge">157</span>Demi Pension</br>
<input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Pension Complete</br>
<input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Al inclusive Soft</br>
<input type="checkbox" name="arrangement" value="pension-complete" /><span class="badge">157</span>Al inclusive</br>
</form>
</div>
<div class="filter-section">
<p class="filter-title filter-toggle">Ville</p>
<form id="cityfilter" action="">
<input type="checkbox" name="city" value="hammamet" /><span class="badge">157</span>Hammamet</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Sousse</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Monastir</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Mahdia</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Tabarka</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Gammarth</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Tunis</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Djerba</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Touzeur</br>
<input type="checkbox" name="city" value="sousse" /><span class="badge">157</span>Douz</br>
</form>
Plus des villes <span class="badge">13</span>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Animating the labels on input focus with CSS and JavaScript - javascript

Related

How to make accordion doesn't work and tell me Cannot read property 'classList' of undefined if element existed?

Hide and Display the div after selecting the radio button

jQuery add .css() if input value changes

How to use radio buttons to make a div visible with javascript

Hiding only one element inside div

Categories

Resources