We Keep Coding

Why is my hide() and show() not working even without error in JQuery? [duplicate]

This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 1 year ago.
I have a function that will show the other content and hide the recent content. But when I am clicking the submit input it's not working. I tried to use anchor tag and button tag and it has the same output.
html:
$(function(){
$('.btn .button').on('click', function(){
$('.container').show()
$('.container-two').hide()
})
})
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue" class="button">
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
I tried to use addClass() and removeClass(), also css() but nothing happens. I also find an answer but nothing like my problem.

First of all, change the first submit type input to a button.
Instead of <input type="submit" name="submit" value="Continue" class="button">
Should be <button class="button" type="button">Continue</button>
This will prevent the form submission, and add the missing "button" class to the button.
Then modify the jquery code like this:
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide()
$('.container-two').show()
})
})
My answer was based on the assumption that you want to show the second container after pressing the first "continue" button.
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide();
$('.container-two').show();
});
});
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information 1</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<button class="button" type="button">Continue</button>
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information 2</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

I copied and pasted the code to codepen and found that he is trying to show the div which is already visible and trying to hide the div which is already hidden, so replaced the hide() and show() with each other.
prevent the default submit event and add hide() and show() on correct divs
$(function(){
$('.btn .button').on('click', function(e){
e.preventDefault();
$('.container').hide()
$('.container-two').show()
})
})

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>

Display Checkbox values after submit button

I am trying to implement a filter. When a checkbox is checked, and after submitting, the checked values should display in the div with a Clear all button and an X button to remove separately, as shown in the image.
Can anybody help me.
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').show("slide");
});
});
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
/******************************************/
$(function() {
$('input[type="checkbox"]').click(
function() {
// if($(this).is(":checked")){
// $("#div ul").append("<li> value <a href='javascript:void(0);' class='remove'>×</a></li>");
// }
value = $(this).val();
if ($(this).is(':checked')) {
$('<li></li>').appendTo('#div ol').text($(this).val());
} else {
value = $(this).val();
if ($('#div ol').has('li:contains("' + value + '")')) {
$('#div ol li:contains("' + value + '")').remove();
}
}
});
});
/******************************************/
/******************************************/
.filter-section .container {
margin-right: 100px;
margin-left: 100px;
padding: 0px;
height: 24px;
}
.filter-section #showmenu {
margin: 0px;
margin-right: 34px;
}
.filter-section #showmenu p {
color: #3f3f3f;
font-size: 18px;
font-weight: 600px;
margin: 0px;
padding: 0px;
}
.filter-section .menu .nav {
border-left: 1px solid #3f3f3f;
}
.filter-section .nav {
display: block;
margin: 0;
padding: 0;
height: 24px;
}
.filter-section .nav li {
display: inline-block;
list-style: none;
}
.filter-section .menu .nav .button-dropdown {
position: relative;
margin-left: 24px;
height: 24px;
}
.filter-section .menu .nav li a {
color: #000;
background-color: #fff;
font-size: 18px;
font-weight: 600;
text-decoration: none;
}
.filter-section .menu .nav li a span {
font-size: 26px;
line-height: 0;
height: 24px;
margin-right: 10px;
}
.filter-section .menu .nav li .dropdown-toggle::after {
display: inline-block;
margin-left: 12px;
vertical-align: 2px;
content: "";
border-top: 6px solid;
border-right: 3px solid transparent;
border-bottom: 0;
border-left: 3px solid transparent;
}
.filter-section .menu .nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 0px;
margin-left: 22px;
text-align: left;
width: 224px;
padding: 10px 24px;
}
.filter-section .menu .nav li .dropdown-menu div {
border-bottom: 1px solid #000;
}
.filter-section .menu .nav li .dropdown-menu div:last-child {
border-bottom: none;
padding-bottom: 10px;
padding-top: 20px;
}
.filter-section .menu .nav li .dropdown-menu.active {
display: block;
}
/*.nav li .dropdown-menu a {
width: 150px;
}*/
/****************************************/
.listofslect {
padding: 0px;
}
.listofslect li {
padding: 10px;
font-size: 14px;
display: inline-block;
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.name {
display: inline-block;
font-size: 14px;
font-weight: 600;
padding: 0;
margin: 0;
padding-bottom: 14px;
padding-top: 10px;
}
.name input {
margin-right: 12px;
}
.button {
border: none;
color: white;
padding: 14px 0px;
text-align: center;
font-size: 16px;
width: 100%;
cursor: pointer;
border-radius: 4px;
background-color: #000000;
}
button:focus {
outline: 0px dotted;
outline: 0px auto -webkit-focus-ring-color;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<section>
<div class="filter-section">
<div class="container d-flex">
<div id="showmenu">
<p> <img src="images/hamburger-icon-open.png"> Filter</p>
</div>
<div class="menu" style="display: none;">
<ul class="nav">
<li class="button-dropdown">
<span>•</span>Learning Modes
<div class="dropdown-menu">
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="Self paced"/>Self paced</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="Classroom"/>Classroom</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="Live Virtual-Classroom"/>Live Virtual Classroom</label>
</div>
<div class="">
<button class="button">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Level
<div class="dropdown-menu">
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="ABC"/>ABC</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="DEF"/>DEF</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="GHI"/>GHI</label>
</div>
<div class="">
<button class="button">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Role
<div class="dropdown-menu">
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="JKL"/>JKL</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="MNO"/>MNO</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="PQR"/>PQR</label>
</div>
<div class="">
<button class="button">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Skills
<div class="dropdown-menu">
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="STU"/>STU</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="VWX"/>VWX</label>
</div>
<div class="">
<label class="name"><input type="checkbox" class="" id="checkbox4" value="YZ"/>YZ</label>
</div>
<div class="">
<button class="button">Apply</button>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="container" id="div">
<ol class="listofslect"></ol>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
The jsFiddle and Codepen code is attached.

I found a way to fix this issue thanks to this link, that explains how to get the checkbox values. This solution works with an array, So to fix your issue, you need below code to print every element checked on the submit event.
var values = new Array();
$.each($("input[name='user_group[]']:checked"), function() {
values.push($(this).val());
});

I have got the solution.
Please go through the code for reference. View in full page.
the codepen and jsfiddle snippets
// Onclick Filter Slide Right Script Starts
$(document).ready(function() {
$('#showmenu').click(function() {
$('.menu').show("slide");
});
});
// Onclick Filter Slide Right Script Ends
// Onclick Dropdown Script Starts Starts
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
// Onclick Dropdown Script Starts Ends
// Onclick Checkbox Display in div and Vice-Varsa Script Starts
// $(':checkbox').on('change', function() {
// var $this = $(this);
// if (this.checked) {
// $('#results')
// .append('<li class="">' + $this.val() + ' <img src="images/close-button.png"> </li>');
// } else {
// removeCheckedResult($('.item[data-cb=' + $this.data('ref') + ']'));
// }
// });
// $(document).on('click', '.item', function() {
// removeCheckedResult($(this));
// });
// function removeCheckedResult($child) {
// $child.parent().remove();
// $('input[class=mainlist][data-ref=' + $child.data('cb') + ']').prop('checked', false).trigger('change');
// }
$(function() {
$(document).on('click', '.item', function() {
removeCheckedResult($(this));
});
function removeCheckedResult($child) {
$child.parent().remove();
$('input[class=mainlist][data-ref=' + $child.data('cb') + ']').prop('checked', false).trigger('change');
}
$("button").on("click", function(e){
var arr =[];
var arr1 =[];
$("#results").html('');
e.preventDefault();
var count = document.querySelectorAll("input:checked")
for (i = 0; i < count.length; i++) {
arr.push(count[i].value);
arr1.push(count[i].getAttribute("data-ref"));
}
for (j = 0; j < arr.length; j++) {
$("#results").append('<li>'+arr[j]+'<img src="https://www.kindpng.com/picc/m/504-5042965_close-wrong-cross-black-png-transparent-png.png"></li>')
}
})
})
// Onclick Checkbox Display in div and Vice-Varsa Script Ends
$(document).ready(function() {
$('#show-hidden-menu, #show-hidden-menu1, #show-hidden-menu2, #show-hidden-menu3').click(function() {
$('.hidden-menu').show("slow");
// Alternative animation for example
// slideToggle("fast");
});
});
$(document).ready(function(){
$(".mode-apply-btn").click(function(){
$(".mode-sec span").css("color", "#26d400");
});
$(".level-apply-btn").click(function(){
$(".level-sec span").css("color", "#26d400");
});
$(".role-apply-btn").click(function(){
$(".role-sec span").css("color", "#26d400");
});
$(".skills-apply-btn").click(function(){
$(".skills-sec span").css("color", "#26d400");
});
$(".button").click(function(){
$(".clear-all").css("display", "inline-block");
});
});
$(".dropdown-menu input:checkbox").on("change", function() {
var len = $(".dropdown-menu input[type='checkbox']:checked").length;
if(len>0)
{
$("#general .counter").text('('+len+')');
}
else
{
$("#general .counter").text(' ');
}
});
$('#filter-submenu').find('.clear-all').prependTo('.hidden-menu>li:last');
// $('.hidden-menu > .clear-all').prepend("");
$('.clear-all').on('click', function () {
$('#filter-submenu').empty();
$('.menu .dropdown-menu div input').prop('checked', false);
$(".mode-sec span").css("color", "#fff");
$(".level-sec span").css("color", "#fff");
$(".skills-sec span").css("color", "#fff");
$(".role-sec span").css("color", "#fff");
});
.filter-section {
margin-top: 40px;
margin-bottom: 40px;
}
.filter-section .container {
margin-right: 100px;
margin-left: 100px;
padding: 0px;
}
.filter-section #showmenu {
margin: 0px;
margin-right: 34px;
margin-bottom: 25px;
}
.filter-section #showmenu a {
color: #3f3f3f;
width: 102px;
font-size: 18px;
font-weight: 600;
margin: 0px;
padding: 0px;
cursor: pointer;
}
.filter-section #showmenu a img{
width:35px
}
.filter-section .menu {
margin-bottom: 25px;
display: none;
}
.filter-section .menu .nav {
border-left: 1px solid #3f3f3f;
}
.filter-section .nav {
display: block;
margin: 0;
padding: 0;
height: 24px;
}
.filter-section .nav li {
display: inline-block;
list-style: none;
}
.filter-section .menu .nav .button-dropdown {
position: relative;
margin-left: 24px;
height: 24px;
}
.filter-section .menu .nav li a {
color: #000;
background-color: #fff;
font-size: 18px;
font-weight: 600;
text-decoration: none;
}
.filter-section .menu .nav li a span {
font-size: 26px;
line-height: 0;
height: 24px;
margin-right: 10px;
color: #fff;
}
.filter-section .menu .nav li .dropdown-toggle::after {
display: inline-block;
margin-left: 12px;
vertical-align: 2px;
content: "";
border-top: 6px solid;
border-right: 3px solid transparent;
border-bottom: 0;
border-left: 3px solid transparent;
}
.filter-section .menu .nav li .dropdown-menu .dropdown-toggle::after {
display: none;
margin-left: 12px;
vertical-align: 2px;
content: "";
border-top: 6px solid;
border-right: 3px solid transparent;
border-bottom: 0;
border-left: 3px solid transparent;
}
.filter-section .menu .nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 10px;
margin-left: 22px;
text-align: left;
width: 224px;
padding: 10px 24px;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
background-color: #ffffff;
}
.filter-section .menu .nav li .dropdown-menu div {
border-bottom: 1px solid #000;
padding: 12px 0px;
}
.filter-section .menu .nav li .dropdown-menu div:nth-last-child(2) {
border-bottom: none;
}
.filter-section .menu .nav li .dropdown-menu div:last-child {
border-bottom: none;
padding-bottom: 10px;
padding-top: 20px;
}
.filter-section .menu .nav li .dropdown-menu div label {
margin-bottom: 0px;
line-height: 0px;
}
.filter-section .menu .nav li .dropdown-menu.active {
display: block;
}
.hidden-menu {
display: none;
}
/****************************************/
.listofslect {
padding: 0px;
}
.listofslect li {
padding: 10px;
font-size: 14px;
display: inline-block;
-webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.name {
display: inline-block;
font-size: 14px;
font-weight: 600;
padding: 0;
margin: 0;
padding-bottom: 14px;
padding-top: 10px;
}
.name input {
margin-right: 12px;
}
.button {
border: none;
color: white;
padding: 14px 0px;
text-align: center;
font-size: 16px;
width: 100%;
cursor: pointer;
border-radius: 4px;
background-color: #000000;
}
button:focus {
outline: 0px dotted;
outline: 0px auto -webkit-focus-ring-color;
}
/**********************************************/
.filter-section #results{
display: none;
}
.filter-section .hidden-menu {
list-style: none;
display: inline-block;
padding: 0px;
margin: 0px;
margin-bottom: 25px;
}
.filter-section .hidden-menu li {
padding: 16px 15px;
margin: 0px;
line-height: 0px;
margin-right: 16px;
margin-bottom: 16px;
float:left;
border-radius: 4px;
border: solid 1px #ECECEC;
background-color: #ECECEC;
}
.filter-section .hidden-menu li a img {
margin-left: 15px;
width: 10px;
}
.filter-section .clear-all{
padding: 8px 0px;
border: none;
background: #fff;
display:none;
}
.filter-section .clear-all a{
color: #26d400;
text-decoration: none;
font-size: 16px;
font-weight: 600;
}
/****************************/
/* Hide the browser's default checkbox */
/*label input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}*/
/*label input{
margin-right: 12px;
}*/
/* Create a custom checkbox */
/*.checkmark {
position: absolute;
top: 15px;
left: 23px;
height: 13px;
width: 13px;
background-color: #fff;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
border: 1px solid;
border-radius: 0px;
}*/
/* On mouse-over, add a grey background color */
/*label:hover input ~ .checkmark {
background-color: #fff;
}*/
/* When the checkbox is checked, add a blue background */
/*label input:checked ~ .checkmark {
background-color: #000;
}
*/
/* Create the checkmark/indicator (hidden when not checked) */
/*.checkmark:after {
content: "";
position: absolute;
display: none;
}*/
/* Show the checkmark when checked */
/*label input:checked ~ .checkmark:after {
display: block;
}*/
/* Style the checkmark/indicator */
/*label .checkmark:after {
left: 4px;
top: 0px;
width: 4px;
height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
}*/
.nav .button-dropdown .dropdown-menu label
{
display:block
}
.nav .button-dropdown .dropdown-menu input[type="checkbox"]
{
position:relative;
top:0px;
margin-right:12px;
-moz-appearance:none;
background-color:#dddddd!important;
}
.nav .button-dropdown .dropdown-menu input[type='checkbox']:after
{
content:"";
vertical-align:middle;
-webkit-appearance:none!important;
-moz-appearance:none!important;
appearance:none!important;
background-color:#fff!important;
border: 1px solid #000;
color:#fff;
text-align:center;
line-height:15px;
position:absolute;
cursor:pointer;
height:15px;
width:15px;
left:0;top:0;
font-size:11px;
background:#fff
}
.nav .button-dropdown .dropdown-menu input[type='checkbox']:checked:after
{
background:#000;
/*content:'\f00c';*/
content: url(images/left-arrow-icon.png);
color:#000;
-webkit-appearance:none!important;
-moz-appearance:none!important;
background-color:#000!important;
color:#fff;
font-family:FontAwesome
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<section>
<div class="filter-section">
<div class="container d-flex">
<div id="showmenu">
<a id="general"> <img src="https://i.dlpng.com/static/png/5460626-filter-filtering-filters-icon-with-png-and-vector-format-for-filter-png-512_512_preview.png"> Filter <span class="counter"></span></a>
</div>
<div class="menu">
<ul class="nav">
<li class="button-dropdown">
<span>•</span>Learning Modes
<div class="dropdown-menu">
<div>
<label><input type="checkbox" class="mainlist" value="test" data-ref="1">test<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test2" data-ref="2">test2<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test3" data-ref="3">test3<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test4" data-ref="4">test4<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test5" data-ref="5">test5<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test6" data-ref="6">test6<span class="checkmark"></span></label>
</div>
<div class="">
<button class="button dropdown-toggle mode-apply-btn" id="show-hidden-menu">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Level
<div class="dropdown-menu">
<div>
<label><input type="checkbox" class="mainlist" value="test7" data-ref="7">test7<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test8" data-ref="8">test8<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test9" data-ref="9">test9<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test10" data-ref="10">test10<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test11" data-ref="11">test11<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test12" data-ref="12">test12<span class="checkmark"></span></label>
</div>
<div class="">
<button class="button dropdown-toggle level-apply-btn" id="show-hidden-menu1">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Role
<div class="dropdown-menu">
<div>
<label><input type="checkbox" class="mainlist" value="test13" data-ref="13">test13<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test14" data-ref="14">test14<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test15" data-ref="15">test15<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test16" data-ref="16">test16<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test17" data-ref="17">test17<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test18" data-ref="18">test18<span class="checkmark"></span></label>
</div>
<div class="">
<button class="button dropdown-toggle role-apply-btn" id="show-hidden-menu2">Apply</button>
</div>
</div>
</li>
<li class="button-dropdown">
<span>•</span>Skills
<div class="dropdown-menu">
<div>
<label><input type="checkbox" class="mainlist" value="test19" data-ref="19">test19<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test20" data-ref="20">test20<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test21" data-ref="21">test21<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test22" data-ref="22">test22<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test23" data-ref="23">test23<span class="checkmark"></span></label>
</div>
<div>
<label><input type="checkbox" class="mainlist" value="test24" data-ref="24">test24<span class="checkmark"></span></label>
</div>
<div class="" >
<button class="button dropdown-toggle skills-apply-btn" id="show-hidden-menu3">Apply</button>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="container d-flex" id="filter-submenu">
<ul class="hidden-menu clearfix" id="results">
</ul>
<a id="clear-all-btn" class="col-1 clear-all">Clear all</a>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

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.

changing the look of the radio button

I am sure this question was asked before but I am looking for a very specific way to style a radio button.
Here is the fiddle of what I currently have
<label for="pretty">
<input type="radio" value="pretty" name="quality" id="pretty"> <span>pretty</span>
</label>
<label for="accessible-and-pretty">
<input type="radio" value="pretty" name="quality" id="accessible-and-pretty" checked> <span>accessible and pretty</span>
</label>
The question that I have is how can I achieve the attached image look and feel?
I am having trouble figuring our how to make the green area smaller or if there is something else I need to do to achieve that

Feel free to change the colors, gradients and sizes to match your requirement.
.container {
width: 100px;
margin: 0 auto;
}
.radio-grp {
margin-bottom: 10px;
}
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 0;
width: 0;
}
input[type="radio"] + label {
display: inline-block;
position: relative;
height: 30px;
width: 30px;
border-radius: 100%;
background-color: #fff;
border: 1px solid #ddd;
}
input[type="radio"] + label,
.radio-txt {
cursor: pointer;
}
label.radio-txt {
display: inline-block;
float: right;
padding-top: 5px;
}
input[type="radio"] + label:before {
content: '';
position: absolute;
height: 22px;
width: 22px;
border-radius: 100%;
top: 4px;
left: 4px;
box-shadow: 4px 5px 10px 0px #ccc inset;
}
input[type="radio"] + label:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
border-radius: 100%;
top: 10px;
left: 10px;
transition: background 0.1s linear;
}
input[type="radio"]:checked + label:after {
background-color: #888888;
}
<div class="container">
<div class="radio-grp">
<input type="radio" name="demo" value="1" id="radio1" checked>
<label for="radio1"></label>
<label for="radio1" class="radio-txt">Demo 1</label>
</div>
<div class="radio-grp">
<input type="radio" name="demo" id="radio2" value="2">
<label for="radio2"></label>
<label for="radio2" class="radio-txt">Demo 2</label>
</div>
<div class="radio-grp">
<input type="radio" name="demo" id="radio3" value="3">
<label for="radio3"></label>
<label for="radio3" class="radio-txt">Demo 3</label>
</div>
</div>