jQuery add .css() if input value changes

jQuery add .css() if input value changes - javascript

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.

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>

Animating the labels on input focus with CSS and 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>

Html CSS form not showing radio button

I want to create a registration form. I put the HTML radio button code but however, it is not showing the radio buttons.
I used the "inspect element" in google chrome developer tools but couldn't resolve the problem.
I have highlighted the error-prone area. Rest areas are working fine.
Project code is given. I am new to Front End, Kindly help.
$('.form').find('input').on('keyup blur focus', function(e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if ($this.val() === '') {
label.removeClass('highlight');
} else if ($this.val() !== '') {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function(e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
background: url(../background.jpg);
/*font-family: 'Titillium Web', sans-serif;*/
font-family: 'Roboto', sans-serif;
background-size: cover;
}
.user {
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
top: -10px;
left: calc(50%-50px);
right: -170px;
}
a {
text-decoration: none;
color: rgb(39, 153, 219);
transition: .5s ease;
}
a:hover {
color: #179b77;
}
.form {
padding: 40px;
max-width: 500px;
margin: 40px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
transition: .5s ease;
position: relative;
}
.form:hover {
box-shadow: 0px 0px 40px 16px rgba(18, 18, 18, 1.00);
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 5px 20px 0;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: #0C0E67;
color: #fff;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #0C0E67;
color: #ffffff;
}
.tab-group .active a {
background: #1316FA;
color: #ffffff;
}
.tab-content>div:last-child {
display: none;
}
h1 {
text-align: center;
color: #fff;
font-weight: 300;
margin: 0 0 40px;
}
/*label {
position: absolute;
transform: translateY(6px);
left: 13px;
color: rgba(255,255,255,0.7);
transition: all 0.25s ease;
pointer-events: none;
font-size: 22px;
}
label .req {
margin: 2px;
color: red;
}*/
label.active {
transform: translateY(50px);
left: 2px;
font-size: 0px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #000;
margin-top: -10px;
}
input {
font-size: 18px;
display: block;
width: 100%;
height: 100%;
padding: 1px 3px;
background-image: none;
border: 1px solid #fff;
color: #fff;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus {
outline: 0;
border-color: #000;
}
.field-wrap input {
padding-left: 40px;
}
.field-wrap i {
position: absolute;
left: 0;
top: -5px;
padding: 9px 8px;
color: silver;
}
.field-wrap {
position: relative;
margin-bottom: 30px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row>div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row>div:last-child {
margin: 0;
}
#sp1 {}
.button {
border: 0;
outline: none;
border-radius: 20px;
padding: 5px 5px;
font-size: 2rem;
font-weight: 50rem;
text-transform: uppercase;
letter-spacing: .1em;
background: rgb(54, 57, 221);
color: #ffffff;
transition: all 0.5s ease;
}
.button:hover,
.button:focus {
background: #1316FA;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
margin-bottom: 10px;
}
fieldset.date {
margin: 0;
padding: 0;
padding-left: 20px;
padding-bottom: .5em;
display: block;
border: none;
}
fieldset.date legend {
margin: 0;
padding: 0;
margin-top: .25em;
font-size: 100%;
}
fieldset.date label {
position: absolute;
top: -20em;
left: -200em;
}
fieldset.date select {
margin: 0;
padding: 0;
font-size: 100%;
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<title>Sign-Up/Login Form</title>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<form action="" method="post">
<div class="field-wrap">
<input type="text" placeholder="First Name" required autocomplete="off" />
<i class="fa fa-user icon"></i>
</div>
<div class="field-wrap">
<input type="text" placeholder="Last Name" required autocomplete="off" />
<i class="fa fa-user icon"></i>
</div>
<div class="field-wrap">
<input type="email" placeholder="E-mail" required autocomplete="off" />
<i class="fa fa-envelope icon"></i>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" required autocomplete="off" />
<i class="fa fa-lock icon"></i>
</div>
<div class="field-wrap">
<input type="tel" placeholder="Phone" required autocomplete="off" />
<i class="fa fa-phone icon"></i>
</div>
<div class="field-wrap">
<input type="text" placeholder="Post Code" pattern="[0-9]{5}" required autocomplete="off" />
<i class="fa fa-map-marker icon"></i>
</div>
<!--Problem Region-->
Gender<br>
<div>
<input type="radio" name="gender">Male
<input type="radio" name="gender" />Female
</div>
<fieldset class="date">
<legend>Birthday </legend>
<label for="month_start">Month</label>
<select id="month_start" name="month_start" />
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select> -
<label for="day_start">Day</label>
<select id="day_start" name="day_start" />
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select> -
<label for="year_start">Year</label>
<select id="year_start" name="year_start" />
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
</fieldset>
<!--Error RegionEnds-->
<button type="submit" class="button button-block" />Register </button>
</form>
</div>
<div id="login">
<img src="./user.png" class="user">
<form action="/" method="post">
<div class="field-wrap">
<input type="email" placeholder="E-mail" required autocomplete="off" />
<i class="fa fa-envelope icon"></i>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" required autocomplete="off" />
<i class="fa fa-lock icon"></i>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block" />Log In</button>
</form>
</div>
</div>
<!-- tab-content -->
</div>
<!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

Your height property in CSS using the input selector is throwing off your markup and causing the radio buttons to expand far past the point you can see them. I would suggest to be more specific with your selectors. Here's code to give you an idea of what's happening and how to fix it:
$('.form').find('input').on('keyup blur focus', function (e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if( $this.val() === '' ) {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if( $this.val() === '' ) {
label.removeClass('highlight');
}
else if( $this.val() !== '' ) {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
*{
box-sizing: border-box;
margin:0px;
padding:0px;
}
body {
background:url(../background.jpg);
/*font-family: 'Titillium Web', sans-serif;*/
font-family: 'Roboto', sans-serif;
background-size:cover;
}
.user{
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
top: -10px;
left: calc(50%-50px);
right: -170px;
}
a {
text-decoration: none;
color: rgb(39, 153, 219);
transition: .5s ease;
}
a:hover {
color: #179b77;
}
.form {
padding: 40px;
max-width: 500px;
margin: 40px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
transition: .5s ease;
position: relative;
}
.form:hover {
box-shadow: 0px 0px 40px 16px rgba(18,18,18,1.00);
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 5px 20px 0;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: #0C0E67;
color: #fff;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #0C0E67;
color: #ffffff;
}
.tab-group .active a {
background:#1316FA;
color: #ffffff;
}
.tab-content > div:last-child {
display: none;
}
h1 {
text-align: center;
color: #fff;
font-weight: 300;
margin: 0 0 40px;
}
/*label {
position: absolute;
transform: translateY(6px);
left: 13px;
color: rgba(255,255,255,0.7);
transition: all 0.25s ease;
pointer-events: none;
font-size: 22px;
}
label .req {
margin: 2px;
color: red;
}*/
label.active {
transform: translateY(50px);
left: 2px;
font-size: 0px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #000;
margin-top:-10px;
}
[type="radio"] {
height: 10px;
}
input {
font-size: 18px;
display: block;
width: 100%;
height: 100%;
padding: 1px 3px;
background-image: none;
border: 1px solid #fff;
color: #fff;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus{
outline: 0;
border-color: #000;
}
.field-wrap input{
padding-left: 40px;
}
.field-wrap i{
position: absolute;
left:0;
top: -5px;
padding: 9px 8px;
color: silver;
}
.field-wrap {
position: relative;
margin-bottom: 30px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row > div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row > div:last-child {
margin: 0;
}
#sp1{
}
.button {
border: 0;
outline: none;
border-radius: 20px;
padding: 5px 5px;
font-size: 2rem;
font-weight: 50rem;
text-transform: uppercase;
letter-spacing: .1em;
background: rgb(54, 57, 221);
color: #ffffff;
transition: all 0.5s ease;
}
.button:hover, .button:focus {
background: #1316FA;
}
.button-block {
display: block;
width: 100%;
}
.forgot {
margin-top: -20px;
text-align: right;
margin-bottom:10px;
}
fieldset.date {
margin: 0;
padding: 0;
padding-left: 20px;
padding-bottom: .5em;
display: block;
border: none;
}
fieldset.date legend {
margin: 0;
padding: 0;
margin-top: .25em;
font-size: 100%;
}
fieldset.date label {
position: absolute;
top: -20em;
left: -200em;
}
fieldset.date select {
margin: 0;
padding: 0;
font-size: 100%;
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<title>Sign-Up/Login Form</title>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<form action="" method="post">
<div class="field-wrap">
<input type="text" placeholder="First Name" required autocomplete="off" />
<i class="fa fa-user icon"></i>
</div>
<div class="field-wrap">
<input type="text" placeholder="Last Name" required autocomplete="off"/>
<i class="fa fa-user icon"></i>
</div>
<div class="field-wrap">
<input type="email" placeholder="E-mail" required autocomplete="off"/>
<i class="fa fa-envelope icon"></i>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" required autocomplete="off"/>
<i class="fa fa-lock icon"></i>
</div>
<div class="field-wrap">
<input type="tel" placeholder="Phone" required autocomplete="off"/>
<i class="fa fa-phone icon"></i>
</div>
<div class="field-wrap">
<input type="text" placeholder="Post Code" pattern="[0-9]{5}" required autocomplete="off"/>
<i class="fa fa-map-marker icon"></i>
</div>
<!--Problem Region-->
Gender<br>
<div>
<input type="radio" name="gender" >Male
<input type="radio" name="gender" />Female
</div>
<fieldset class="date">
<legend>Birthday </legend>
<label for="month_start">Month</label>
<select id="month_start"
name="month_start" />
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select> -
<label for="day_start">Day</label>
<select id="day_start"
name="day_start" />
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select> -
<label for="year_start">Year</label>
<select id="year_start"
name="year_start" />
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
</fieldset>
<!--Error RegionEnds-->
<button type="submit" class="button button-block"/>Register </button>
</form>
</div>
<div id="login">
<img src="./user.png" class="user">
<form action="/" method="post">
<div class="field-wrap">
<input type="email" placeholder="E-mail" required autocomplete="off"/>
<i class="fa fa-envelope icon"></i>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" required autocomplete="off"/>
<i class="fa fa-lock icon"></i>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block"/>Log In</button>
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

In addition to the height issue that was pointed out. It's a good idea to wrap the radio button inside a label tag. This makes it much easier for a user to interact with since its all clickable...
<label for="myRadioBtn">
<input type="radio" name="myRadioBtn />
<span>Label Text</span>
</label>

Creating Tabs using JQuery or Javascript

How could I achieve the same behaviour as my current CSS using JQuery or javascript, where the contents of a tab is shown when its div is clicked?
For example, If I clicked SUN, it shows content of the sunday tab i.e " Today is Sunday" and if clicked MON shows "Today is Monday".
How can I achieve this using JQuery and Javascript rather than CSS?
#import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 1px;
font-family: Open Sans;
margin-top: 10px;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 5px 0.6%;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -4px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: red;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
#content1,
#content2,
#content3,
#content4,
#content5,
#content6,
#content7 {
display: none;
border-top: 1px solid #bbb;
padding: 3px;
margin-top: 2px;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4,
#tab5:checked~#content5,
#tab6:checked~#content6,
#tab7:checked~#content7 {
display: block;
box-shadow: 0 0 15px #939393;
}
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">SUN</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">MON</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">TUE</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">WED</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">THU</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">FRI</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">SAT</label>
<div id="content1">
<p> This is Sunday</>
</div>
<div id="content2">
<p> This is Monday</p>
</div>
<div id="content3">
<p> This is Tuesday</p>
</div>
<div id="content4">
<p> This is Wednesday</p>
</div>
<div id="content5">
<p> This is Thursday</p>
</div>
<div id="content6">
<p> This is Friday</p>
</div>
<div id="content7">
<p> This is Saturday</p>
</div>

There is a great article on W3schools on how to make tabs using Javascript -
https://www.w3schools.com/howto/howto_js_tabs.asp
Each content div should be given a common class. Such as tabcontent. When one of the radio buttons are clicked to switch tabs a function will be ran to hide all tabcontent divs (hiding all shown tabs), and then only show the required content.
Using JQuery I came up with this code -
HTML
<div class="tabinator">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">SUN</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">MON</label>
<input type="radio" id="tab3" name="tabs">
<label for="tab3">TUE</label>
<input type="radio" id="tab4" name="tabs">
<label for="tab4">WED</label>
<input type="radio" id="tab5" name="tabs">
<label for="tab5">THU</label>
<input type="radio" id="tab6" name="tabs">
<label for="tab6">FRI</label>
<input type="radio" id="tab7" name="tabs">
<label for="tab7">SAT</label>
<div id="content1" class="tabcontent">
<p> This is Sunday</>
</div>
<div id="content2" class="tabcontent">
<p>This is Monday</p>
</div>
<div id="content3" class="tabcontent">
<p> This is Tuesday</p>
</div>
<div id="content4" class="tabcontent">
<p> This is Wednesday</p>
</div>
<div id="content5" class="tabcontent">
<p> This is Thursday</p>
</div>
<div id="content6" class="tabcontent">
<p> This is Friday</p>
</div>
<div id="content7" class="tabcontent">
<p> This is Saturday</p>
</div>
CSS
#import url('https://fonts.googleapis.com/cssfamily=Open+Sans:400,600,700');
* {
margin: 0;
padding: 0;
}
body {
padding: 2px;
background: #E5E4E2;
}
.tabinator {
background: #fff;
padding: 1px;
font-family: Open Sans;
margin-top: 10px;
}
.tabinator input {
display: none;
}
.tabinator label {
box-sizing: border-box;
display: inline-block;
padding: 5px 0.6%;
color: #ccc;
margin-bottom: -1px;
margin-left: -1px;
font-family: courier;
font-weight: bold;
}
.tabinator label:before {
content: '';
display: block;
width: 100%;
height: 15px;
background-color: #fff;
position: absolute;
bottom: -4px;
left: 0;
z-index: 10;
}
.tabinator label:hover {
color: red;
cursor: pointer;
}
.tabinator input:checked+label {
position: relative;
color: red;
font-weight: bold;
background: #fff;
border: 1px solid #bbb;
border-bottom: 1px solid #fff;
border-radius: 5px 5px 0 0;
font-size: 22px;
}
.tabinator input:checked+label:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 15px #939393;
}
.tabcontent {display: none;}
#content1 {display: block;}
JQuery Function
$('input[name=tabs]').click(function(){
var id = $(this).attr('id');
$('.tabcontent').css('display', 'none');
switch (id) {
case "tab1":
$('#content1').css('display', 'block');
break;
case "tab2":
$('#content2').css('display', 'block');
break;
case "tab3":
$('#content3').css('display', 'block');
break;
case "tab4":
$('#content4').css('display', 'block');
break;
case "tab5":
$('#content5').css('display', 'block');
break;
case "tab6":
$('#content6').css('display', 'block');
break;
case "tab7":
$('#content7').css('display', 'block');
break;
}
});
Other methods can be used rather than a switch statement as long as the display of all tabcontent elements is set to none and the content to be shown is set to be displayed with block.
Hope this achieves what you wanted.

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/

We Keep Coding

JavaScript is the programming language of the Web.

jQuery add .css() if input value changes - javascript

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

Related

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

Animating the labels on input focus with CSS and JavaScript

Html CSS form not showing radio button

Creating Tabs using JQuery or Javascript

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

Categories

Resources