We Keep Coding

Form check prevent from submiting even when everything is ok

i have a problem with my form, i ran it through the form checker and even when everything is successful it still won't submit. i tried to change it a lot of times and im not sure how to keep the code like that instead of one function that will return on form submit.
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
const genderSelected = document.getElementById('select');
//Show input error messages
function showError(input, message) {
const formControl = input.parentElement;
formControl.className = 'form-control error';
const small = formControl.querySelector('small');
small.innerText = message;
}
//show success colour
function showSucces(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
//check email is valid
function checkEmail(input) {
const re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test(input.value.trim())) {
showSucces(input)
} else {
showError(input, 'Email is not invalid');
}
}
//checkRequired fields
function checkRequired(inputArr) {
inputArr.forEach(function(input) {
if (input.value.trim() === '') {
showError(input, `${getFieldName(input)} is required`)
} else {
showSucces(input);
}
});
}
//check input Length
function checkLength(input, min, max) {
if (input.value.length < min) {
showError(input, `${getFieldName(input)} must be at least ${min} characters`);
} else if (input.value.length > max) {
showError(input, `${getFieldName(input)} must be les than ${max} characters`);
} else {
showSucces(input);
}
}
//get FieldName
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// check passwords match
function checkPasswordMatch(input1, input2) {
if (input1.value !== input2.value) {
showError(input2, 'Passwords do not match');
}
}
//check if selected a gender
function checkSelect(option) {
if (select.value)
showSucces(option);
else
showError(option, 'Please select a gender');
}
//Event Listeners
form.addEventListener('submit', function(e) {
e.preventDefault();
checkRequired([username, email, password, password2, genderSelected]);
checkLength(username, 3, 15);
checkLength(password, 6, 25);
checkEmail(email);
checkPasswordMatch(password, password2);
checkSelect(genderSelected);
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
:root {
--succes-color: #2ecc71;
--error-color: #e74c3c;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 400px;
max-width: 100%;
box-sizing: border-box;
padding: 25px;
margin: 8% auto 0;
position: relative;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 400px;
}
h2 {
text-align: center;
margin: 0 0 20px;
}
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
color: #777;
display: block;
margin-bottom: 5px;
}
.form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
width: 100%;
padding: 10px;
font-size: 14px;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
.form-control.success input {
border-color: var(--succes-color);
}
.form-control.error input {
border-color: var(--error-color);
}
.form-control small {
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
cursor: pointer;
background-color: #3498db;
border: 2px solid #3498db;
border-radius: 4px;
color: #fff;
display: block;
padding: 10px;
font-size: 16px;
margin-top: 20px;
width: 100%;
}
form {
border: 0px solid black;
display: inline-block;
text-align: left;
}
body {
margin: 50px 0px;
padding: 0px;
text-align: center;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: lightblue;
}
.nav {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline;
resize: horizontal
}
label,
input[type="text,password,date"] {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
input[type="radio"] {
display: block;
width: 25px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
h1 {
color: black;
text-align: center;
font-size: xx-large;
}
.button {
text-align: center;
margin: auto;
display: inline-block;
padding: 5px 15px;
font-size: 18px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: black;
background-color: white;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {
background-color: black;
color: white;
}
.button:active {
background-color: black;
color: white;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
p {
font-family: verdana;
font-size: 20px;
}
#wrapper {
width: 30%;
margin: 50px auto;
padding: 50px;
background: #D7FBFF;
}
.textInput {
border: none;
height: 28px;
margin: 2px;
border: 1px solid #6B7363;
font-size: 1.2em;
padding: 5px;
width: 95%;
}
.textInput:focus {
outline: none;
}
.btn {
width: 98.6%;
border: none;
margin-top: 5px;
color: white;
background-color: #3b5998;
border-radius: 5px;
padding: 12px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
output {
display: inline;
}
.customizedBox {
border: 1px solid #111;
width: 500px;
height: 400px;
}
select {
width: 280px;
height: 40px;
padding: 10px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
border: none;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Memes Over The Years</li>
<li>Profile</li>
<li>About</li>
</ul>
</div>
<!-- partial:index.partial.html -->
<div class="wrapper">
<div class="container">
<form id="form" class="form">
<h2>Register With Us</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter Username">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="password2">Confirm Password</label>
<input type="password" id="password2" placeholder="Enter password again">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="gender">Gender</label> <br/>
<select id="select">
<option value="">Choose an option</option>
<option value="Male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<small>Error Message</small>
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
<br /><br /><br /><br />
<span>Allready have an account?Log In</span>

Here is the simplest fix for you always blocking the submission with preventDefault
if (document.querySelectorAll(".error").length > 0) e.preventDefault();
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
const genderSelected = document.getElementById('select');
//Show input error messages
function showError(input, message) {
const formControl = input.parentElement;
formControl.className = 'form-control error';
const small = formControl.querySelector('small');
small.innerText = message;
}
//show success colour
function showSucces(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
//check email is valid
function checkEmail(input) {
const re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test(input.value.trim())) {
showSucces(input)
} else {
showError(input, 'Email is not invalid');
}
}
//checkRequired fields
function checkRequired(inputArr) {
inputArr.forEach(function(input) {
if (input.value.trim() === '') {
showError(input, `${getFieldName(input)} is required`)
} else {
showSucces(input);
}
});
}
//check input Length
function checkLength(input, min, max) {
if (input.value.length < min) {
showError(input, `${getFieldName(input)} must be at least ${min} characters`);
} else if (input.value.length > max) {
showError(input, `${getFieldName(input)} must be les than ${max} characters`);
} else {
showSucces(input);
}
}
//get FieldName
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
// check passwords match
function checkPasswordMatch(input1, input2) {
if (input1.value !== input2.value) {
showError(input2, 'Passwords do not match');
}
}
//check if selected a gender
function checkSelect(option) {
if (select.value)
showSucces(option);
else
showError(option, 'Please select a gender');
}
//Event Listeners
form.addEventListener('submit', function(e) {
checkRequired([username, email, password, password2, genderSelected]);
checkLength(username, 3, 15);
checkLength(password, 6, 25);
checkEmail(email);
checkPasswordMatch(password, password2);
checkSelect(genderSelected);
if (document.querySelectorAll(".error").length > 0) e.preventDefault();
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
:root {
--succes-color: #2ecc71;
--error-color: #e74c3c;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 400px;
max-width: 100%;
box-sizing: border-box;
padding: 25px;
margin: 8% auto 0;
position: relative;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 400px;
}
h2 {
text-align: center;
margin: 0 0 20px;
}
.form {
padding: 30px 40px;
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
color: #777;
display: block;
margin-bottom: 5px;
}
.form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
width: 100%;
padding: 10px;
font-size: 14px;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
.form-control.success input {
border-color: var(--succes-color);
}
.form-control.error input {
border-color: var(--error-color);
}
.form-control small {
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
cursor: pointer;
background-color: #3498db;
border: 2px solid #3498db;
border-radius: 4px;
color: #fff;
display: block;
padding: 10px;
font-size: 16px;
margin-top: 20px;
width: 100%;
}
form {
border: 0px solid black;
display: inline-block;
text-align: left;
}
body {
margin: 50px 0px;
padding: 0px;
text-align: center;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
background-color: lightblue;
}
.nav {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline;
resize: horizontal
}
label,
input[type="text,password,date"] {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;
}
input[type="radio"] {
display: block;
width: 25px;
float: left;
margin-bottom: 10px;
}
label {
text-align: right;
width: 75px;
padding-right: 20px;
}
br {
clear: left;
}
h1 {
color: black;
text-align: center;
font-size: xx-large;
}
.button {
text-align: center;
margin: auto;
display: inline-block;
padding: 5px 15px;
font-size: 18px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: black;
background-color: white;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {
background-color: black;
color: white;
}
.button:active {
background-color: black;
color: white;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
p {
font-family: verdana;
font-size: 20px;
}
#wrapper {
width: 30%;
margin: 50px auto;
padding: 50px;
background: #D7FBFF;
}
.textInput {
border: none;
height: 28px;
margin: 2px;
border: 1px solid #6B7363;
font-size: 1.2em;
padding: 5px;
width: 95%;
}
.textInput:focus {
outline: none;
}
.btn {
width: 98.6%;
border: none;
margin-top: 5px;
color: white;
background-color: #3b5998;
border-radius: 5px;
padding: 12px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
output {
display: inline;
}
.customizedBox {
border: 1px solid #111;
width: 500px;
height: 400px;
}
select {
width: 280px;
height: 40px;
padding: 10px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
border: none;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Memes Over The Years</li>
<li>Profile</li>
<li>About</li>
</ul>
</div>
<!-- partial:index.partial.html -->
<div class="wrapper">
<div class="container">
<form id="form" class="form">
<h2>Register With Us</h2>
<div class="form-control">
<label for="username">Username</label>
<input type="text" id="username" placeholder="Enter Username">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="password2">Confirm Password</label>
<input type="password" id="password2" placeholder="Enter password again">
<small>Error Message</small>
</div>
<div class="form-control">
<label for="gender">Gender</label> <br/>
<select id="select">
<option value="">Choose an option</option>
<option value="Male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<small>Error Message</small>
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
<br /><br /><br /><br />
<span>Allready have an account?Log In</span>

You call e.preventDefault() unconditionally.
This means, that whatever your code does, you will never submit the form (the default action)
Wrap the prevent default in an if statement and execute it only if the validation fails.

Toggle navigation buttons on click

I got this small navigation-like li's - when one is clicked it should get an .active class, and when the other one is clicked the class should be transferred to that one. Any ideas how could I achieve that via some kind of loop..?
$(".nav-btn").on('click', function () {
if($(this).hasClass('active')){
$(this).removeClass("active");
} else {
$(this).addClass("active");
}
});
ul {
position: absolute;
right: 25px;
top: 35%;
}
li {
list-style: none;
font-size: 20px;
padding: 1px;
font-weight: 700;
border-radius: 5px;
cursor: pointer;
color: #1B3067;
position: relative;
}
span.nav-btn {
content: "";
display: inline-block;
height: 11px;
width: 11px;
border: 2px solid red;
border-radius: 50%;
float: right;
}
span.nav-btn.active {
background-color: red;
}
.nav-title {
text-align: right;
position: relative;
top: -25px;
right: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mainNavigation">
<li id="item1"><span class="nav-btn"></span><p class="nav-title">Item 1</p></li>
<li id="item2"><span class="nav-btn"></span><p class="nav-title">Item 2</p></li>
<li id="item3"><span class="nav-btn"></span><p class="nav-title">Item 3</p></li>
</ul>

Try :
$(".nav-btn").on('click', function () {
$(".nav-btn").removeClass("active");
$(this).addClass("active");
});

Why not just target the list-items instead and toggle siblings?
$("#mainNavigation li").on('click', function() {
$(this).addClass('active').siblings().removeClass('active');
});
ul {
position: absolute;
right: 25px;
top: 35%;
}
li {
list-style: none;
font-size: 20px;
padding: 1px;
font-weight: 700;
border-radius: 5px;
cursor: pointer;
color: #1B3067;
position: relative;
}
span.nav-btn {
content: "";
display: inline-block;
height: 11px;
width: 11px;
border: 2px solid red;
border-radius: 50%;
float: right;
}
.active span.nav-btn {
background-color: red;
}
.nav-title {
text-align: right;
position: relative;
top: -25px;
right: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mainNavigation">
<li id="item1"><span class="nav-btn"></span>
<p class="nav-title">Item 1</p>
</li>
<li id="item2"><span class="nav-btn"></span>
<p class="nav-title">Item 2</p>
</li>
<li id="item3"><span class="nav-btn"></span>
<p class="nav-title">Item 3</p>
</li>
</ul>

Remove active class when other .nav-btn are clicked.
$(".nav-btn").on('click', function () {
if(!$(this).hasClass('active')){
$(".nav-btn").removeClass("active");
$(this).addClass("active");
}
});
ul {
position: absolute;
right: 25px;
top: 35%;
}
li {
list-style: none;
font-size: 20px;
padding: 1px;
font-weight: 700;
border-radius: 5px;
cursor: pointer;
color: #1B3067;
position: relative;
}
span.nav-btn {
content: "";
display: inline-block;
height: 11px;
width: 11px;
border: 2px solid red;
border-radius: 50%;
float: right;
}
span.nav-btn.active {
background-color: red;
}
.nav-title {
text-align: right;
position: relative;
top: -25px;
right: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mainNavigation">
<li id="item1"><span class="nav-btn"></span><p class="nav-title">Item 1</p></li>
<li id="item2"><span class="nav-btn"></span></span><p class="nav-title">Item 2</p></li>
<li id="item3"><span class="nav-btn"></span><p class="nav-title">Item 3</p></li>
</ul>

Simply remove the class on all elements and add it to the new one.
$(".nav-btn").on('click', function() {
$(".nav-btn").removeClass("active");
$(this).addClass("active");
});
ul {
position: absolute;
right: 25px;
top: 35%;
}
li {
list-style: none;
font-size: 20px;
padding: 1px;
font-weight: 700;
border-radius: 5px;
cursor: pointer;
color: #1B3067;
position: relative;
}
span.nav-btn {
content: "";
display: inline-block;
height: 11px;
width: 11px;
border: 2px solid red;
border-radius: 50%;
float: right;
}
span.nav-btn.active {
background-color: red;
}
.nav-title {
text-align: right;
position: relative;
top: -25px;
right: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mainNavigation">
<li id="item1"><span class="nav-btn"></span><p class="nav-title">Item 1</p></li>
<li id="item2"><span class="nav-btn"></span></span><p class="nav-title">Item 2</p></li>
<li id="item3"><span class="nav-btn"></span><p class="nav-title">Item 3</p></li>
</ul>

$(".nav-btn").on('click', function () {
$( ".nav-btn" ).each(function( index ) {
$(this).removeClass("active");
});
$(this).addClass("active");
});

Fixing the position of apply button in Multi-Select Checkbox

I have designed multi-select checkbox by using some code snippets.
However, I don't want user to scroll down to the list to select the apply button.
In the Following Snapshot, There is no apply button unless user scroll bottom of the list.
What I am trying to achieve is to show the scroll bar between Select Measure and Apply Button.
JsFiddle
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
function closebox() {
var checkboxes = document.getElementById("checkboxes");
$(checkboxes).delay(5000).fadeIn();
checkboxes.style.display = "none";
}
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {}
}
function getvalues() {
var str = '';
var checks = document.getElementsByClassName('checks');
for (i = 0; i < checks.length; i++) {
if (checks[i].checked === true) {
str += checks[i].value + " ";
}
}
alert(str);
}
function getvalue() {
var str = '';
var checks = document.getElementsByClassName('checks');
alert(checks[0].checked);
}
.multiselect {
width: 180px;
}
.selectBox {
/* position: relative; */
position: relative
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
line-height: 0px;
height: 100px;
padding: 0px;
border: 1px #dadada solid;
overflow-y: scroll;
overflow-x: hidden;
}
#checkboxes::-webkit-scrollbar {
width: 6px;
}
#checkboxes::-webkit-scrollbar-thumb {
background-color: grey;
outline: 1px solid slategrey;
border-radius: 4px;
}
select {
background-color: #e6e6e6;
border: thin solid #e6e6e6;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1em;
padding: 0.5em 3.5em 0.5em 1em;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
cursor: pointer;
outline: 0;
color: #7b7b7b;
}
.selectBox:after {
content: "\f13a";
font-family: "FontAwesome";
padding: 10px 0px 10px 2px;
position: absolute;
right: 10px;
top: 0;
color: #7b7b7b;
font-size: 15px;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
label {
cursor: pointer;
color: #666;
display: block;
margin: 0px 4px 2px -29px;
padding: 3px;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+.label-text:before {
content: "\f096";
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-right: 5px;
}
input[type="checkbox"]:checked+.label-text:before {
content: "\f14a";
color: #06a3e9;
}
input[type="checkbox"]:disabled+.label-text {
color: #aaa;
}
input[type="checkbox"]:disabled+.label-text:before {
content: "\f0c8";
color: #ccc;
}
.submit {
background: #ff8080;
color: #008080;
padding: 10px 5px 5px;
border: 0;
width: 100%;
font-size: 14px;
cursor: pointer;
text-align: center;
}
ul {
padding: 0px 0px 2px 34px;
}
li {
list-style: none;
padding: 0px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select class="round">
<option>Select Measure</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<ul>
<li> <label> <input type="checkbox" name="" class="checks" value="1" onchange="closebox()"><span class="label-text">Item One</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="2"><span class="label-text">Item Two</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="3" ><span class="label-text">Item Three</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="4" ><span class="label-text">Item Four</span></label></li>
<li> <label> <input type="checkbox" name="" class="checks" value="5" ><span class="label-text">Item Five</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="6" ><span class="label-text">Item Six</span></label></li>
</ul>
<label> <input type="submit" class="submit round" value="APPLY"></label>
</div>
</div>
</form>
<button onclick="getvalues()"> Get Values </button>
/

You can move the label out of the checkboxes, so when you scroll - you will scroll only the checkboxes:
var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes-container");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
function closebox() {
var checkboxes = document.getElementById("checkboxes-container");
$(checkboxes).delay(5000).fadeIn();
checkboxes.style.display = "none";
}
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {}
}
function getvalues() {
var str = '';
var checks = document.getElementsByClassName('checks');
for (i = 0; i < checks.length; i++) {
if (checks[i].checked === true) {
str += checks[i].value + " ";
}
}
alert(str);
}
function getvalue() {
var str = '';
var checks = document.getElementsByClassName('checks');
alert(checks[0].checked);
}
.multiselect {
width: 180px;
}
.selectBox {
/* position: relative; */
position: relative
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes-container {
display: none;
height: 120px;
}
#checkboxes {
line-height: 0px;
height: 80px;
padding: 0px;
border: 1px #dadada solid;
overflow-y: scroll;
overflow-x: hidden;
}
#checkboxes::-webkit-scrollbar {
width: 6px;
}
#checkboxes::-webkit-scrollbar-thumb {
background-color: grey;
outline: 1px solid slategrey;
border-radius: 4px;
}
select {
background-color: #e6e6e6;
border: thin solid #e6e6e6;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1em;
padding: 0.5em 3.5em 0.5em 1em;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
cursor: pointer;
outline: 0;
color: #7b7b7b;
}
.selectBox:after {
content: "\f13a";
font-family: "FontAwesome";
padding: 10px 0px 10px 2px;
position: absolute;
right: 10px;
top: 0;
color: #7b7b7b;
font-size: 15px;
z-index: 1;
text-align: center;
width: 10%;
height: 100%;
pointer-events: none;
box-sizing: border-box;
}
label {
cursor: pointer;
color: #666;
display: block;
margin: 0px 4px 2px -29px;
padding: 3px;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+.label-text:before {
content: "\f096";
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
width: 1em;
display: inline-block;
margin-right: 5px;
}
input[type="checkbox"]:checked+.label-text:before {
content: "\f14a";
color: #06a3e9;
}
input[type="checkbox"]:disabled+.label-text {
color: #aaa;
}
input[type="checkbox"]:disabled+.label-text:before {
content: "\f0c8";
color: #ccc;
}
.submit {
background: #ff8080;
color: #008080;
padding: 10px 5px 5px;
border: 0;
width: 100%;
font-size: 14px;
cursor: pointer;
text-align: center;
}
ul {
padding: 0px 0px 2px 34px;
}
li {
list-style: none;
padding: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select class="round">
<option>Select Measure</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes-container">
<div id="checkboxes">
<ul>
<li> <label> <input type="checkbox" name="" class="checks" value="1" onchange="closebox()"><span class="label-text">Item One</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="2"><span class="label-text">Item Two</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="3" ><span class="label-text">Item Three</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="4" ><span class="label-text">Item Four</span></label></li>
<li> <label> <input type="checkbox" name="" class="checks" value="5" ><span class="label-text">Item Five</span></label></li>
<li><label> <input type="checkbox" name="" class="checks" value="6" ><span class="label-text">Item Six</span></label></li>
</ul>
</div>
<label> <input type="submit" class="submit round" value="APPLY"></label>
</div>
</div>
</form>
<button onclick="getvalues()"> Get Values </button>

jQuery delete class after click

I have viewer of objects with a switcher of list view and grid view. I also made if statement which says that when user choose grid view and in description is more than 35 characters user see only 35 characters, but when user back to list view I want it to comeback to full description. Can you have any solution for that?
$(document).ready(function() {
$("a.switcher").bind("click", function(event) {
event.preventDefault();
var mainId = $(this).attr("id");
var classNames = $(this).attr('class').split(' ');
var companyView = $("ul#company");
var linkList = $('span#link-list');
var gridDescription = $('span.description');
var listDescription = $('span.meta');
if (mainId == "gridview") {
$(this).addClass("active");
$("#listview").removeClass("active");
companyView.removeClass("list");
companyView.addClass("grid col-xs-12");
linkList.addClass("links-position");
gridDescription.addClass('.restrict');
var txt = $('.description').text();
if (txt.length > 35 && mainId == "gridview") {
$('.description').html(txt.substring(0, 35) + ' <a class="morelink" href="">[...]</a>');
}
$(".morelink").click(function(event) {
event.preventDefault();
$("#gridview").removeClass("active");
$("#listview").addClass("active");
companyView.removeClass("grid col-xs-12");
companyView.addClass("list");
linkList.removeClass("links-position");
});
} else if (mainId == "listview") {
$(this).addClass("active");
$("#gridview").removeClass("active");
companyView.removeClass("grid col-xs-12");
companyView.addClass("list");
linkList.removeClass("links-position");
}
});
});
* {
margin: 0;
padding: 0;
}
body {
color: #333;
padding-bottom: 25px;
}
img {
border: 0;
}
p {
font-size: 1.2em;
line-height: 1.3em;
margin-bottom: 10px;
}
#wrap {
margin: 0 auto;
border-radius: 7px;
}
#wrap header {
border-bottom: 1px solid white;
margin-bottom: 35px;
padding-top: 20px;
position: relative;
}
#wrap header .list-style-buttons {
color: red;
position: absolute;
right: 0;
}
.switcher {
color: red;
}
.switcher:active {
color: #da1d15;
}
.switcher:visited {
color: #da1d15;
}
ul.list {
margin-bottom: 20px;
list-style: none;
width: 100%;
}
ul.list li {
margin-bottom: 20px;
display: block;
}
ul.list li section.left {
margin: 10px;
display: block;
float: left;
position: relative;
padding-left: 20px;
}
ul.list li .meta {
display: block;
}
ul.list li .links {
display: inline;
}
ul.list li .secondOffer {
margin-left: 20px;
}
ul.list li section.left img.thumb {
margin: 10px;
height: 150px;
width: 300px;
float: right;
}
ul.list li section.left h3 {
text-align: left;
font-weight: bold;
text-transform: uppercase;
font-size: 1.4em;
}
ul.list section.left {
padding: 20px;
}
ul.grid {
list-style: none;
margin: 0 auto;
}
ul.grid li section.left img.thumb {
height: 150px;
width: 300px;
position: relative;
}
ul.grid li {
display: block;
float: left;
width: 270px;
height: 150px;
padding: 5px 30px;
margin-bottom: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul.grid li section.left {
padding: 10px;
}
ul.grid section.left {
position: relative;
height: 400px;
}
.links-position {
position: absolute;
bottom: 0;
}
ul.grid li.clearfix {
margin-bottom: 300px;
}
ul.grid li section.left h3 {
position: relative;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2em;
line-height: 1.5em;
}
ul.grid li .meta {
display: block;
}
ul.grid li .address {
position: relative;
}
ul.grid li .description {
position: absolute;
}
ul.grid li .links {
padding-left: 20px;
}
ul.grid .clearfix {
padding: 10px;
}
.clearfix {}
section.left {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
section.left:hover {
-webkit-box-shadow: 0 0 10px rgba(207, 168, 168, 1);
-moz-box-shadow: 0 0 10px rgba(207, 168, 168, 1);
box-shadow: 0 0 15px rgba(207, 168, 168, 1);
}
a:link {
color: red;
text-decoration: none;
}
a.links:visited {
color: red;
text-decoration: none;
}
a.morelink {
text-decoration: none;
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap" class="col-xs-12">
<header>
<span class="list-style-buttons">
<i class="fa fa-2x fa-th-list"></i>
<i class="fa fa-2x fa-th"></i>
</span>
</header>
<ul id="company" class="list clearfix">
<li class="clearfix alt">
<section class="left">
<img src="" alt="company image" class="thumb">
<a href="">
<h3>Name</h3>
</a>
<span class="meta address"><strong>Address: </strong></span>
<span class="meta description">
DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
</span>
<span id="link-list">
<a href="" class="links">
<i class="fa fa-id-card-o"></i>
Users:
</a>
<a href="" class="links secondOffer">
<i class="fa fa-database"></i>
Offers:
</a>
</span>
</section>
</li>
</ul>
</div>

You can store a lot of things inside jQuery's data storage (which is aligned with the HTML5 data attribute, but not directly connected).
$(document).ready(function () {
//`bind` is deprecated, use `on`:
$("a.switcher").on("click", function (event) {
event.preventDefault();
var mainId = $(this).attr("id");
var classNames = $(this).attr('class').split(' ');
var companyView = $("ul#company");
var linkList = $('span#link-list');
var gridDescription = $('span.description');
var listDescription = $('span.meta');
if (mainId == "gridview") {
$(this).addClass("active");
$("#listview").removeClass("active");
companyView.removeClass("list");
companyView.addClass("grid col-xs-12");
linkList.addClass("links-position");
gridDescription.addClass('.restrict');
//store local description:
var $description = $(".description");
$.each($description, function(i, e){
var $thisDesc = $(this);
var txt = $thisDesc.text();
$thisDesc.data("full-desc", txt);
if (txt.length > 35 && mainId == "gridview") {
$thisDesc.html(txt.substring(0, 35) + ' <a class="morelink" href="">[...]</a>');
}
});
//the .morelink a tag is being generated, you were trying to assign a listener *to that link*, but it doesn't exist yet, instead add a listener to a parent element that *will exist* on page load:
$("#company").on("click", ".morelink", function (event) {
event.preventDefault();
$("#gridview").removeClass("active");
$("#listview").addClass("active");
//is this where you want to restore the full description? Whenever you want, you can then pull the full description from the data-full-desc field, like this:
var $description = $(this).parents("li").find(".description");
$description.html($description.data("full-desc"));
companyView.removeClass("grid col-xs-12");
companyView.addClass("list");
linkList.removeClass("links-position");
});
} else if (mainId == "listview") {
$(this).addClass("active");
$("#gridview").removeClass("active");
companyView.removeClass("grid col-xs-12");
companyView.addClass("list");
linkList.removeClass("links-position");
//restore descriptions:
$.each($(".description"), function(i, e){
if(!!$(this).data("full-desc"))
$(this).html($(this).data("full-desc"));
});
}
});
});
* {
margin: 0;
padding: 0;
}
body {
color: #333;
padding-bottom: 25px;
}
img {
border: 0;
}
p {
font-size: 1.2em;
line-height: 1.3em;
margin-bottom: 10px;
}
#wrap {
margin: 0 auto;
border-radius: 7px;
}
#wrap header {
border-bottom: 1px solid white;
margin-bottom: 35px;
padding-top: 20px;
position: relative;
}
#wrap header .list-style-buttons {
color: red;
position: absolute;
right: 0;
}
.switcher {
color: red;
}
.switcher:active {
color: #da1d15;
}
.switcher:visited {
color: #da1d15;
}
ul.list {
margin-bottom: 20px;
list-style: none;
width: 100%;
}
ul.list li {
margin-bottom: 20px;
display: block;
}
ul.list li section.left {
margin: 10px;
display: block;
float: left;
position: relative;
padding-left: 20px;
}
ul.list li .meta {
display: block;
}
ul.list li .links {
display: inline;
}
ul.list li .secondOffer {
margin-left: 20px;
}
ul.list li section.left img.thumb {
margin: 10px;
height: 150px;
width: 300px;
float: right;
}
ul.list li section.left h3 {
text-align: left;
font-weight: bold;
text-transform: uppercase;
font-size: 1.4em;
}
ul.list section.left {
padding: 20px;
}
ul.grid {
list-style: none;
margin: 0 auto;
}
ul.grid li section.left img.thumb {
height: 150px;
width: 300px;
position: relative;
}
ul.grid li {
display: block;
float: left;
width: 270px;
height: 150px;
padding: 5px 30px;
margin-bottom: 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ul.grid li section.left {
padding: 10px;
}
ul.grid section.left {
position: relative;
height: 400px;
}
.links-position {
position: absolute;
bottom: 0;
}
ul.grid li.clearfix {
margin-bottom: 300px;
}
ul.grid li section.left h3 {
position: relative;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2em;
line-height: 1.5em;
}
ul.grid li .meta {
display: block;
}
ul.grid li .address {
position: relative;
}
ul.grid li .description {
position: absolute;
}
ul.grid li .links {
padding-left: 20px;
}
ul.grid .clearfix {
padding: 10px;
}
.clearfix {
}
section.left {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
section.left:hover {
-webkit-box-shadow: 0 0 10px rgba(207, 168, 168, 1);
-moz-box-shadow: 0 0 10px rgba(207, 168, 168, 1);
box-shadow: 0 0 15px rgba(207, 168, 168, 1);
}
a:link {
color: red;
text-decoration: none;
}
a.links:visited {
color: red;
text-decoration: none;
}
a.morelink {
text-decoration: none;
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" />
<div id="wrap" class="col-xs-12">
<header>
<span class="list-style-buttons">
<i class="fa fa-2x fa-th-list"></i>
<i class="fa fa-2x fa-th"></i>
</span>
</header>
<ul id="company" class="list clearfix">
<li class="clearfix alt">
<section class="left">
<img src="" alt="company image" class="thumb">
<a href="#">
<h3>Name</h3></a>
<span class="meta address"><strong>Address: </strong></span>
<span class="meta description">DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION DESCRIPTION
</span>
<span id="link-list">
<a href=""
class="links"><i class="fa fa-id-card-o"></i>
Users: </a>
<i class="fa fa-database"></i> Offers:
</span>
</section>
</li>
</ul>
</div>
jQuery's data function: https://api.jquery.com/data/
The .data() method allows us to attach data of any type to DOM
elements in a way that is safe from circular references and therefore
from memory leaks.

You could use the css text-overflow: clip when you're in the grid view to clip any text that doesn't fit inside of your element.
Options also include:
text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "…";
text-overflow: fade;
text-overflow: fade(10px);
text-overflow: fade(5%);
From: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

If i understood your question, you want to switch between tow classes each time the button was clicked, so i prpose to use .toggleClass().

How to get the button to toggle between F and C?

I was able to get the temperature to switch between Fahrenheit and Celcius. However, I wasn't able to get the small ball/button to move back and forth between F and C.
$(document).ready(function() {
var mainCities = {
'San Francisco' : {
'region': 'California',
'country': "United States",
'lat': 37.7749300,
'lon': -122.4194200
},
'St. Louis': {
'region': 'Missouri',
'country': "United States",
'lat': 38.6272700,
'lon': -90.1978900
},
'Miami': {
'region': 'Florida',
'country': "United States",
'lat': 25.7742700,
'lon': -80.1936600
},
'Tokyo': {
'region': 'Tokyo',
'country': "Japan",
'lat': 35.689500,
'lon': 139.6917100
}
}
var currentLat;
var currentLong;
function getLocation() {
$.getJSON('http://ip-api.com/json/?callback=?', function(data) {
//var currentRegion = data.regionName;
var currentCity = data.city;
currentLat = data.lat;
currentLong = data.lon;
$("#cityname").text(currentCity);
getWeather();
});
}
function getWeather() {
$.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=' + currentLat + '&lon=' + currentLong + '&units=imperial&APPID=e656b9ee098cf2341fcfdb365b96b4a8', function(json) {
var showfahrenheit = true;
var tempfahrenheit = Math.round(json.main.temp);
var temcelcius = Math.round((tempfahrenheit - 32) * 5/9);
$("#temp").html(tempfahrenheit);
$('#unit-switch').on('click', function() {
if (showfahrenheit === false) {
$("#temp").html(tempfahrenheit);
showfahrenheit = true;
} else {
$("#temp").html(temcelcius);
showfahrenheit = false;
}
$("#unit-toggle").toggleClass("toggle");
//$('#temp').toggleClass('toggle');
});
});
};
$(".cityarea").html(getLocation);
});
#import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
body {
position: relative;
}
html,body{
height:100%;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
.container {
position: relative;
display: block;
margin: 0 auto;
width: 60%;
}
.header h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: normal;
}
.weatherbox {
text-align: center;
}
.cityarea h2 {
color: #000000;
}
.dropdown{
position: relative;
display: inline-block;
font-size: 16px;
color: #FFF;
}
input[type=checkbox]{
display: none;
}
label{
box-sizing: border-box;
display: inline-block;
width: 100%;
background-color: #57A0D4;
padding: 10px 20px;
cursor: pointer;
text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
border-radius: 5px;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label .fa-globe {
margin-right: 10px;
}
/* The ul will have display:none by default */
ul{
position: absolute;
list-style: none;
text-align: left;
width: 100%;
min-width: 160px;
z-index: 1;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
display: none;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
ul li{
/*padding: 15px;*/
background-color: #fff;
color: #4FB9A7;
margin-bottom: 1px;
cursor: pointer;
}
ul li a {
padding: 8px 20px;
color: inherit;
text-decoration: none;
display: block;
}
ul li a:hover{
background-color: #4FB9A7;
color: #FFF;
}
input[type=checkbox]:checked ~ label {
background-color: #3D88BD;
}
input[type=checkbox]:checked ~ ul {
display: block;
}
ul .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.temperaturearea span#temp {
position: relative;
color: #000000;
font-size: 80px;
}
.temperaturearea #temp:after {
content: '';
position: absolute;
height: 10px;
width: 10px;
top: 16px;
right: -17px;
border: 3px solid #000000;
border-radius: 50%;
}
.weather > span {
position: relative;
font-size: 1.2rem;
}
.weather > span:before {
content: '';
position: absolute;
left: -10px;
top: 0px;
height: 3px;
width: 3px;
border: 2px solid #000;
border-radius: 50%;
}
.main-toggle span {
margin: 0 0 0 16px;
}
.main-toggle span:last-child {
margin-left: 11px;
}
.weather button {
background: #6bbf6b;
border: none;
border-radius: 30px;
outline: none;
width: 45px;
height: 20px;
margin: 5px 5px 0;
cursor: pointer;
position: relative;
transition: background .2s;
}
.weather button:active {
background: #67b567;
}
.weather #unit-toggle {
position: absolute;
display: inline-block;
left: -8px;
top: 2px;
width: 15px;
height: 15px;
background: #fff;
border-radius: 50%;
transition: left .2s;
}
.toggle {
left: 27px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="container">
<div class="header"><h1>Local Weather</h1></div>
<div class="weatherbox">
<div class="cityarea">
<h2 id="cityname"></h2>
</div>
<div class="countryarea">
<h3 id="state"></h3>
<h3 id="country"></h3>
</div>
<!--<div class="dropdownlocation">
<div class="dropdown">
<input type="checkbox" id="checkbox-toggle">
<label for="checkbox-toggle"><i class="fa fa-globe" aria-hidden="true"></i><i class="fa fa-caret-down" aria-hidden="true"></i></label>
<ul>
<li>Current Location</li>
<li class="divider"></li>
<li>Main Cities</li>
</li>
</ul>
</div>
</div>-->
<div class="temperaturearea">
<div>
<span id="wicon"></span>
</div>
<div id="wdescription"></div>
<span id="temp"></span>
<div class="weather main-toggle"> <!-- Begin Unit Switch -->
<span>F</span>
<button id="unit-switch"><span id="unit-toggle"></span></button>
<span>C</span>
</div>
</div>
</div>
</div>
</div>
You can even check out my code at Codepen: http://codepen.io/kikibres/pen/EZMJZw
What did I miss? I'm trying to toggleClass using the class .toggle everytime I use #unit-switch to click on.

Your css selector is not specific enough
.weather #unit-toggle overrides .toggle's left property.
try #unit-toggle.toggle
codepen: http://codepen.io/anon/pen/XpvOvV

Your previous selector is more specific so to balance it you have to use this:
#unit-toggle.toggle {
left: 15px;
}