We Keep Coding

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>

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>

Replace DIV contents with DIV contents JavaScript (No jQuery)

I am currently working on a form for a page in MOSS 2007 and am forced to use a lot of JavaScript in place of CSS3 and jQuery due to government restrictions. I come from the C# world and JavaScript is still somewhat new to me.
My current objective is to replace the contents of a stationary div element with the contents of another that is hidden on the page. I'm coming to my wits end trying resolve this only remaining issue on this page. Currently I'm using a simple (pseudo: doc.getbyid(id).innerhtml = newdiv) to replace the contents of the div, now my two theories are that either 1) the onclick event isn't calling the function, or 2) the replace just isn't working.
(function() {
document.getElementById("currentSlide").innerHtml = document.getElementById("contactSlide").innerHtml;
})();
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
document.getElementById("currentSlide").innerHtml = document.getElementById(eIDs[id]).innerHtml;
}
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform .fsDiv {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
width: 80%;
margin: 0 10%;
position: relative;
}
#msform .fsDiv:not(:first-of-type) {
display: none;
}
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
<div id="msform">
<ul id="progressbar">
<li class="active">Contact Information</li>
<li>Request Type</li>
<li>Details</li>
</ul>
<div id="currentSlide" class="fsDiv"></div>
<div id="contactSlide" class="fsDiv">
<h2 class="title">Contact Information</h2>
<h3 class="subtitle">Please supply your contact information.</h3>
<input type="text" name="contName" placeholder="Last Name, First Name" />
<input type="text" name="contNum" placeholder="Phone Number" />
<input type="text" name="contEma" placeholder="E-Mail" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="typeSlide" class="fsDiv">
<h2 class="fs-title">Request Type</h2>
<h3 class="fs-subtitle">What type of request would you like to make?</h3>
<span>Type: <select name="ddlTypes">
<option>Permissions</option>
<option>Report Bug</option>
</select></span>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="permissionStage" class="fsDiv">
<h2 class="title">Permissions Request</h2>
<h3 class="subtitle">Please supply details about your request.</h3>
<input type="text" name="permName" placeholder="Last Name, First Name" />
<span>Permission Level Needed: <select name="ddlPermissions">
<option>Viewer</option>
<option>Member</option>
<option>Administrator</option>
</select></span>
<input type="text" name="permReason" placeholder="Reason For Permission Level" />
<input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div id="bugReportSlide" class="fsDiv">
<h2 class="title">Report An Issue</h2>
<h3 class="subtitle">Please provide some details about the issue.</h3>
<input type="text" name="bugLocation" placeholder="Link To Page" />
<input type="text" name="bugDescription" placeholder="What Is Happening?" />
<span>Severity: <select name="ddlSeverity">
<option>Low</option>
<option>Medium</option>
<option>High</option>
<option>Critical</option>
</select></span>
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
</div>
The only other thing I can think to do is to store the inner html in a var and just assigning it as needed. Please help!

There are 2 things why it's not working
change innerHtml to innerHTML
add a load handler so DOM is ready before you target its elements
I also chose to drop the unnecessary document.getElementById() statement and simpy call the nextSlide function with its first item index
window.addEventListener('load', function(e) {
nextSlide(0);
})
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform .fsDiv {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
width: 80%;
margin: 0 10%;
position: relative;
}
#msform .fsDiv:not(:first-of-type) {
display: none;
}
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
<div id="msform">
<ul id="progressbar">
<li class="active">Contact Information</li>
<li>Request Type</li>
<li>Details</li>
</ul>
<div id="currentSlide" class="fsDiv"></div>
<div id="contactSlide" class="fsDiv">
<h2 class="title">Contact Information</h2>
<h3 class="subtitle">Please supply your contact information.</h3>
<input type="text" name="contName" placeholder="Last Name, First Name" />
<input type="text" name="contNum" placeholder="Phone Number" />
<input type="text" name="contEma" placeholder="E-Mail" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="typeSlide" class="fsDiv">
<h2 class="fs-title">Request Type</h2>
<h3 class="fs-subtitle">What type of request would you like to make?</h3>
<span>Type: <select name="ddlTypes">
<option>Permissions</option>
<option>Report Bug</option>
</select></span>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="permissionStage" class="fsDiv">
<h2 class="title">Permissions Request</h2>
<h3 class="subtitle">Please supply details about your request.</h3>
<input type="text" name="permName" placeholder="Last Name, First Name" />
<span>Permission Level Needed: <select name="ddlPermissions">
<option>Viewer</option>
<option>Member</option>
<option>Administrator</option>
</select></span>
<input type="text" name="permReason" placeholder="Reason For Permission Level" />
<input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div id="bugReportSlide" class="fsDiv">
<h2 class="title">Report An Issue</h2>
<h3 class="subtitle">Please provide some details about the issue.</h3>
<input type="text" name="bugLocation" placeholder="Link To Page" />
<input type="text" name="bugDescription" placeholder="What Is Happening?" />
<span>Severity: <select name="ddlSeverity">
<option>Low</option>
<option>Medium</option>
<option>High</option>
<option>Critical</option>
</select></span>
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
</div>

Your code is ok, but replace innerHtml with innerHTML, JavaScript is case sensitive.
(function() {
document.getElementById("currentSlide").innerHTML = document.getElementById("contactSlide").innerHTML;
})();
var eIDs [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(var id) {
document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}

(function() {
document.getElementById("currentSlide").innerHTML = document.getElementById("contactSlide").innerHTML;
})();
var eIDs = [ "contactSlide", "typeSlide", "permissionsSlide", "bugReportSlide" ];
function nextSlide(id) {
document.getElementById("currentSlide").innerHTML = document.getElementById(eIDs[id]).innerHTML;
}
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform .fsDiv {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
width: 80%;
margin: 0 10%;
position: relative;
}
#msform .fsDiv:not(:first-of-type) {
display: none;
}
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
.title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
#progressbar {
margin-bottom: 30px;
overflow: hidden;
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1;
}
#progressbar li:first-child:after {
content: none;
}
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
<div id="msform">
<ul id="progressbar">
<li class="active">Contact Information</li>
<li>Request Type</li>
<li>Details</li>
</ul>
<div id="currentSlide" class="fsDiv"></div>
<div id="contactSlide" class="fsDiv">
<h2 class="title">Contact Information</h2>
<h3 class="subtitle">Please supply your contact information.</h3>
<input type="text" name="contName" placeholder="Last Name, First Name" />
<input type="text" name="contNum" placeholder="Phone Number" />
<input type="text" name="contEma" placeholder="E-Mail" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="typeSlide" class="fsDiv">
<h2 class="fs-title">Request Type</h2>
<h3 class="fs-subtitle">What type of request would you like to make?</h3>
<span>Type: <select name="ddlTypes">
<option>Permissions</option>
<option>Report Bug</option>
</select></span>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
<div id="permissionStage" class="fsDiv">
<h2 class="title">Permissions Request</h2>
<h3 class="subtitle">Please supply details about your request.</h3>
<input type="text" name="permName" placeholder="Last Name, First Name" />
<span>Permission Level Needed: <select name="ddlPermissions">
<option>Viewer</option>
<option>Member</option>
<option>Administrator</option>
</select></span>
<input type="text" name="permReason" placeholder="Reason For Permission Level" />
<input type="text" name="permLink" placeholder="Link To Area Where Access Is Needed" />
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
<div id="bugReportSlide" class="fsDiv">
<h2 class="title">Report An Issue</h2>
<h3 class="subtitle">Please provide some details about the issue.</h3>
<input type="text" name="bugLocation" placeholder="Link To Page" />
<input type="text" name="bugDescription" placeholder="What Is Happening?" />
<span>Severity: <select name="ddlSeverity">
<option>Low</option>
<option>Medium</option>
<option>High</option>
<option>Critical</option>
</select></span>
<textarea name="address" placeholder="Address"></textarea>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</div>
</div>
You had an issue with the param in your nextSlide function, you were passing var id, when it should just be id. and your var eIDs was missing an = so your array was never declared in the variable. the gentleman above is still using the incorrect code. Do you have a click handler? can we see it?

The issue was with placement of the script itself; moved to the end of the body and worked like a charm! The little issues such as innerHTML and the equals sign for eids and the var id were just little oversights; of course I had to add the additional handlers for onclick once I got the load to work. It's now working like a charm. Thank you all for being such great help!

Change the look of the search box

I'm having a problem getting the search box to look like I want.
http://i39.tinypic.com/e8u8gn.jpg
My CSS Code:
#searchform {
position: relative;
padding: 5px;
}
HTML Code:
<body class="home">
<div id="container">
<header id="masthead">
<h1><p>Testing</p></h1></header>
<nav class="nav-buttons" id="primary">
<ul>
<li id="search" style="padding-left:400px;">
<form id="searchform" action="http://www.Google.com/" method="get"><label class="screen- reader-text" for="s">
</label><input id="s" type="text" placeholder="Type your search here" name="s" value=""> </input><input id="searchsubmit" type="submit" value="Search"></input></form></li>
</ul>
</nav>

Check this Fiddle
HTML
<div>
<input type="text">
</div>
CSS
div {
background: #e1e1e1;
padding: 20px;
}
input {
padding: 5px 5px;
width: 300px;
height: 30px;
font-size: 16px;
border: 1px solid #ccc;
padding-right: 50px;
background: #fff url(http://png.findicons.com/files/icons/1389/g5_system/16/toolbar_find.png) no-repeat;
background-position: 330px center;
}
input:focus {
border: 1px solid #ccc;
}

CSS
.hey { border:1px solid #efefef; padding:7px; font:normal 14px Tahoma; }
HTML (change into this)
<input id="s" class="hey" type="text" placeholder="Type your search here" name="s" value=""> </input>
<input id="searchsubmit" type="image" src="search.gif"</input></form></li></input>
Enjoy!