Radio button multiple issue with list - javascript

I am trying to select the text, on text select or list select the radio button should be selected automatically by the jquery code but its looping between the last two radio buttons only
note: i want only one selection should be made between 5 radio button on list selection
Here is my code:
$('.saved_card .customerid').click(function() {
$('.glyphicon-ok').removeClass('glyphicon-ok');
$('.saved_card .selected_radio').removeClass('selected_radio');
$("i", this).toggleClass('glyphicon-ok');
$(this).toggleClass('selected_radio');
$('input[type="radio"]').not(':checked').prop("checked", true);
});
And my jsfiddle is here.


Please use HTML5 label element like this:
<ul class="saved_card">
<li class="customerid">
<label for="cust1">Savings account-***4443<i class="form-control-feedback glyphicon"></i></label>
<input type="radio" name="customer" value="cust1" id="cust1">
</li>
<li class="customerid">
<label for="cust2">Savings account-***4443<i class="form-control-feedback glyphicon"></i></label>
<input type="radio" name="customer" value="cust2" id="cust2">
</li>
</ul>
You don't need javascript to do this.


Yes, you can use label tag like André Senra says
$('.saved_card .customerid').click(function() {
$('.glyphicon-ok').removeClass('glyphicon-ok');
$(this).addClass('glyphicon-ok');
$('.selected_radio').removeClass('selected_radio');
$(this).addClass('selected_radio');
$('input[type="radio"]').prop("checked", false);
$(this).find('input[type="radio"]').prop("checked", true);
});
ul.saved_card li i {
height: 48px;
line-height: 48px;
font-size: 17px;
font-weight: lighter;
margin-right: 10px;
color: #f00f64;
}
ul.saved_card li {
height: 50px;
border: 0;
border-bottom: 1px solid #fafafa;
background-color: #fff;
border-radius: 0;
box-shadow: none;
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="saved_card">
<li class="customerid">
<input type="radio" name="customer" value="cust1" id="cust1">Savings account-***4443<i class="form-control-feedback glyphicon"></i>
</li>
<li class="customerid">
<input type="radio" name="customer" value="cust2" id="cust2" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i>
</li>
<li class="customerid">
<input type="radio" name="customer" value="cust3" id="cust3" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i>
</li>
<li class="customerid">
<input type="radio" name="customer" value="cust4" id="cust4" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i>
</li>
<li class="customerid">
<input type="radio" name="customer" value="cust5" id="cust5" checked>Savings account-***4212<i class="form-control-feedback glyphicon glyphicon-ok"></i>
</li>
</ul>
And jsfiddle is here
https://jsfiddle.net/svp4msfu/1/


Change last line to this:
$('input[type="radio"]', $(this)).not(':checked').prop("checked", true);
Though you should rather do as Andre suggests, and use a label.

Related

Keep scroll position in an element on page refresh

I set a ul of product variants with horizontal scroll.
When i scroll and click on a variant the page refresh and the scroll return to start.
I need to maintain the posistion where it was first of refresh.
How can i do?
ul#group_17 {
width: 150px;
display: flex;
overflow: auto;
list-style: none;
}
li {margin: 0 10px 0 0}
.input-color {
position: absolute;
opacity: 0;
cursor: pointer;
height: 60px;
width: 60px;
}
span {
height: 60px;
width: 60px;
display: block;
}
<ul id="group_17">
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="87">
<span class="color texture" style="background:black"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="88" checked="checked">
<span class="color texture" style="background:brown;"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="89">
<span class="color texture" style="background:red"></span>
</label>
</li>
<li class="float-xs-left input-container">
<label>
<input class="input-color" type="radio" data-product-attribute="17" name="group[17]" value="90">
<span class="color texture" style="background:yellow"></span>
</label>
</li>
</ul>

More information is needed
But you can give an ID to the part of your code that you want and when you click, it will be linked to the same part

you can use this code in js
document.location.reload(true)
or use this in js
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var scrollpos = localStorage.getItem('scrollpos');
if (scrollpos) window.scrollTo(0, scrollpos);
});
window.onbeforeunload = function(e) {
localStorage.setItem('scrollpos', window.scrollY);
};
</script>

How can i access my parent li element using javascript?

I am a beginner in JavaScript and I can't figure out that how can I get the index of li whose checkbox is checked and add/remove the CSS class cut to that particular li.
I tried parent methods but that was not working maybe I was not doing in a proper manner!
for instance, I intentionally added the CSS cut class to the last li but I want to add this class to li when the checkbox is checked.
function myfunction() {
}
.cut {
text-decoration: line-through;
opacity: 0.4;
}
#mylist {
list-style: none;
}
<div class="container">
<ul id="mylist">
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction()">
<label class="mytodo">make tea</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction()">
<label class="mytodo">notes making</label>
</li>
<li class="mycheck cut">
<input type="checkbox" class="status" checked onclick="myfunction()">
<label class="mytodo">set clothes</label>
</li>
</ul>
</div>

You can pass this keyword to the function so that you can identify the closest li element of the clicked checkbox:
function myfunction(el){
if(el.checked){
el.closest('li').classList.add('cut');
}
else{
el.closest('li').classList.remove('cut');
}
}
.cut{
text-decoration: line-through;
opacity: 0.4;
}
#mylist{list-style: none;}
<div class="container">
<ul id="mylist">
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction(this)" >
<label class="mytodo">make tea</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction(this)">
<label class="mytodo">notes making</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status" onclick="myfunction(this)">
<label class="mytodo">set clothes</label>
</li>
</ul>
</div>
Attaching event using JavaScript:
var checkboxes = document.querySelectorAll('.mycheck .status');
checkboxes.forEach(function(chk){
chk.addEventListener('click', function(){
myfunction(this);
});
})
function myfunction(el){
if(el.checked){
el.closest('li').classList.add('cut');
}
else{
el.closest('li').classList.remove('cut');
}
}
.cut{
text-decoration: line-through;
opacity: 0.4;
}
#mylist{list-style: none;}
<div class="container">
<ul id="mylist">
<li class="mycheck">
<input type="checkbox" class="status" >
<label class="mytodo">make tea</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status">
<label class="mytodo">notes making</label>
</li>
<li class="mycheck">
<input type="checkbox" class="status">
<label class="mytodo">set clothes</label>
</li>
</ul>
</div>

checkbox structure where If single child checkboxes are selected, then the parent checkbox should get selected automatically

enter image description hereI need to create checkbox structure with the following conditions:-
When a parent checkbox is selected, all child checkboxes should get selected automatically.
If all child checkboxes are unselected, then the parent checkbox should get unchecked automatically.
If single child checkboxes are selected, then the parent checkbox should get selected automatically.
...this is how it should look like : -[this is how it should look like
this is my code. But it doesn't seems to satisfy 2nd condition. I think my logic is right but somewhere there is syntax problem. Please explain the changes you suggest or make. Thanks a ton in advance.
<!DOCTYPE html>
<html>
<head>
<title>jquery3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="#"></script>
<style>
.col-md-3.mx-auto.my-3.d-block.px-0 {
border: 1px solid;
border-color: #eeeeee;
}
.col-md-3.mx-auto.my-3.d-block .header {
background: linear-gradient(#f1f1f1, #fff);
border-bottom: 1px solid #eeeeee;
color: #616161;
letter-spacing: 1px;
padding-top: 2px;
padding-left: 18%;
font-family: Georgia;
font-weight: bold;
/* height: 9%; */
padding-bottom: 2px;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down {
padding-top: 4%;
padding-left: 6%;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down .drop-down {
background: #fff;
border: 2px solid #f1f1f1;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
.col-md-3.mx-auto.my-3.d-block .selecter {
padding-top: 4%;
padding-left: 6%;
color: #464f44;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
#submitbtn {
margin-top: 4%;
margin-left: 6%;
margin-bottom: 4%;
/* height: 23px; */
width: 72px;
background: linear-gradient(#fff, #f1f1f1);
/* font-size: 13px; */
font-family: Georgia;
}
.OU {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-3 mx-auto my-3 d-block px-0">
<div class="header">Manage Permission</div>
<div class="Drop-down">
<select name="dropdown" class="drop-down">
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
</select>
</div>
<div class="selecter">
<div class="Property">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Property</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Property</label>
</li>
</ul>
</div>
<div class="Testimonial">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Organic Updates</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Add</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit</label>
</li>
</ul>
</div>
<div class="Users">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Users</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit User</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View User List</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add_User</label>
</li>
</ul>
</div>
<div class="Membership">
<div>
<input class = "parchek" type="checkbox" name="selection">
<label class="mb-0">Membership</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Membership</label>
</li>
</ul>
</div>
</div>
<button type="submit" id="submitbtn" name="submitbtn">Submit</button>
</div>
</div>
<!--$('.selectall').click(function() {
if ($(this).is(':checked')) {
$('div input').attr('checked', true);
} else {
$('div input').attr('checked', false);
}
});--->
<script>
$(document).ready(function(){
$('.parchek').click(function() {
$(this).parents().siblings("ul").find("input").prop('checked', this.checked);
});
//$("input").click(function() {
//$(this).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);
//});
$('.selecter').find('input').each(function(index, input) {
$("input").on("change", function(){
var checkbox = $(this);
var is_checked = $(checkbox).is(':checked');
if(is_checked) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);
}else{
var checkbox = $(this).parents("li").siblings("li").find("input");
var is_checked = $(checkbox).is(':checked');
if(is_checked) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);}
else{
$(checkbox).parents("ul").siblings("div").find('.parchek').removeAttr('checked');
}
}
});
});
});
</script>
<!--else{
// var checkbox = $(this).parents("li").siblings("li").find("input");
// var is_checked = $(checkbox).is(':checked');
// if(is_checked) {
// $(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);}else{
// $(checkbox).parents("ul").siblings("div").find('.parchek').removeAttr('checked');
/// }
// }}
// });
// });--->
</body>
</html>

I'd add a class to the group and to the child checkboxes for easier selection.
Your parent selector function is good, though I wrote it as below. The child selector function should update based on if any boxes are ticked or not; you can use the .length property to get the number of checked child boxes.
Jsfiddle
$(document).ready(function() {
//check/uncheck any siblings
$('.selecter input.parchek').click(function() {
$(this).closest("div.checkgroup").find(".childchek").prop("checked", this.checked);
});
//check/uncheck parent
$('.selecter input.childchek').click(function() {
var numChecked = $(this).closest("div.checkgroup").find(".childchek:checked").length;
$(this).closest("div.checkgroup").find(".parchek").prop("checked", (numChecked > 0));
});
});

You had two errors:
This was not returning the correct valuevar is_checked = $(checkbox).is(':checked');, instead you could have used the already defined checkbox element checkbox.is(':checked');
Instead of using .removeAttr() in $(checkbox).parents("ul").siblings("div").find('.parchek').removeAttr('checked'); you chould have used .prop('checked', false);
Corrected code below:
$(document).ready(function() {
$('.parchek').click(function() {
$(this).parents().siblings("ul").find("input").prop('checked', this.checked);
});
$('.selecter').find('input').each(function(index, input) {
$(this).on("change", function() {
var checkbox = $(this);
var is_checked = checkbox.is(':checked');
if (is_checked) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', this.checked);
} else {
let checkboxes = $(this).parents("ul").find("input");
if (allCheckBoxesUnChecked(checkboxes)) {
$(checkbox).parents("ul").siblings("div").find('.parchek').prop('checked', false);
}
}
});
});
// helper function that checks if all checkboxes are unchecked
function allCheckBoxesUnChecked(elems) {
let allUnchecked = true;
$.each(elems, function(ind, item) {
if (item.checked) {
allUnchecked = false;
return;
}
});
return allUnchecked;
}
});
.col-md-3.mx-auto.my-3.d-block.px-0 {
border: 1px solid;
border-color: #eeeeee;
}
.col-md-3.mx-auto.my-3.d-block .header {
background: linear-gradient(#f1f1f1, #fff);
border-bottom: 1px solid #eeeeee;
color: #616161;
letter-spacing: 1px;
padding-top: 2px;
padding-left: 18%;
font-family: Georgia;
font-weight: bold;
/* height: 9%; */
padding-bottom: 2px;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down {
padding-top: 4%;
padding-left: 6%;
}
.col-md-3.mx-auto.my-3.d-block .Drop-down .drop-down {
background: #fff;
border: 2px solid #f1f1f1;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
.col-md-3.mx-auto.my-3.d-block .selecter {
padding-top: 4%;
padding-left: 6%;
color: #464f44;
font-size: 15px;
/* padding-left: 18%; */
font-family: Georgia;
}
#submitbtn {
margin-top: 4%;
margin-left: 6%;
margin-bottom: 4%;
/* height: 23px; */
width: 72px;
background: linear-gradient(#fff, #f1f1f1);
/* font-size: 13px; */
font-family: Georgia;
}
.OU {
margin-bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>jquery3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="#"></script>
<style>
</style>
</head>
<body>
<div class="container">
<div class="col-md-3 mx-auto my-3 d-block px-0">
<div class="header">Manage Permission</div>
<div class="Drop-down">
<select name="dropdown" class="drop-down">
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
<option value="subsubfgh">subsubfgh</option>
</select>
</div>
<div class="selecter">
<div class="Property">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Property</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Property</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Property</label>
</li>
</ul>
</div>
<div class="Testimonial">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Organic Updates</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Add</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit</label>
</li>
</ul>
</div>
<div class="Users">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Users</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit User</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">View User List</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add_User</label>
</li>
</ul>
</div>
<div class="Membership">
<div>
<input class="parchek" type="checkbox" name="selection">
<label class="mb-0">Membership</label>
</div>
<ul style="list-style-type:none;">
<li>
<input type="checkbox" name="selection">
<label class="OU">Edit Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Remove Membership</label>
</li>
<li>
<input type="checkbox" name="selection">
<label class="OU">Add Membership</label>
</li>
</ul>
</div>
</div>
<button type="submit" id="submitbtn" name="submitbtn">Submit</button>
</div>
</div>
</body>
</html>

Hover the mouse out of button?

If I hover the mouse out of the login button, the dropdown menu appears, I want it to appear only if I hover the mouse on the button, how can I do?
Also, how can I position the login button on the far right?

you have added the hover on the .dropdown div which has the form, login button and other elements. So whenever you hover on the .dropdown div you will see the dropdown menu.
If you want the dropdown menu to be shown only when the user hovers on the login menu then you need to add the :hover on login button. Or you can control the same by adding the JavaScript mouseover listener on login button.
I hope you find the below code helpful.
<div class="dropdown">
<button>Admin</button>
<form action="UserProfile">
<input type="submit" value="Profilo">
</form>
<form action="Logout">
<input type="submit" value="Logout">
</form>
<span>
<button class="logInButton" onclick="openForm()">Login</button>
<div id="form-block" class="form-popup">
<form id="signin-form" class="form-container" name="signInForm" action="SignIn" method="post">
<span id="validEmail"></span>
<ul style="list-style: none;">
<li><label for="email">Email</label></li>
<li><input id="email" class="form-field" type="text" name="email"></li>
<span id="validPassword"></span>
<li><label for="password">Password</label></li>
<li><input id="password" class="form-field" type="password" name="password"></li>
<li><button type="submit" class="btn" onclick="return validateForm(signInForm)">Accedi</button></li>
<li><button type="submit" class="btn" formaction="SignUp" formnovalidate onclick="clearForm()">Registrati</button></li>
<li><button type="button" class="btn-cancel" onclick="closeForm()">Back</button></li>
</ul>
</form>
</div>
</div>
function openForm() {document.getElementById("form-block").style.display = "block";}
function closeForm() {document.getElementById("form-block").style.display = "none" ;}
function clearForm() {
var form = document.forms["signin-form"];
form.email.value = null;
form.password.value = null;
}
.logInButton {
background-color: #345059;
margin: 10px 0px 0px 0px;
color: white;
font-size: 16px;
padding: 16px;
border: none;
overflow: hidden;
position: relative;
float: right;
}
.form-popup {
display: none;
position: absolute;
background-color: #f2fcff;
}
.form-popup a {
color: black;
padding: 0;
text-decoration: none;
}
.logInButton:hover ~ .form-popup {
display: block;
}
.logInButton:hover {background-color: #2e3538;}
<div class="dropdown">
<button>Admin</button>
<form action="UserProfile">
<input type="submit" value="Profilo">
</form>
<form action="Logout">
<input type="submit" value="Logout">
</form>
<span>
<button class="logInButton" onclick="openForm()">Login</button>
<div id="form-block" class="form-popup">
<form id="signin-form" class="form-container" name="signInForm" action="SignIn" method="post">
<span id="validEmail"></span>
<ul style="list-style: none;">
<li><label for="email">Email</label></li>
<li><input id="email" class="form-field" type="text" name="email"></li>
<span id="validPassword"></span>
<li><label for="password">Password</label></li>
<li><input id="password" class="form-field" type="password" name="password"></li>
<li><button type="submit" class="btn" onclick="return validateForm(signInForm)">Accedi</button></li>
<li><button type="submit" class="btn" formaction="SignUp" formnovalidate onclick="clearForm()">Registrati</button></li>
<li><button type="button" class="btn-cancel" onclick="closeForm()">Back</button></li>
</ul>
</form>
</div>
</div>

Multiple toggles with multiple forms and anchors

I have a bunch of forms and to toggle between those forms works just fine. However I think I did my steps backwards.
Ideally, I only want to see my 'generating customer calculations' <a> tag on page load. When I click on it I want to then see the 'calculators' link beneath the first one, and then when I click on that, that's when I want see all form titles.
I am not sure if I need to rearrange my HTML in terms of how my <ul> elements are ordered or what. I have hit a bit of a wall.
$(".calc-nav li a").on("click", function() {
toggleForms($(this).data("id"));
});
$(".calc-nav li:first a").click();
$(".calcs1").hide();
function toggleForms(id) {
$(".forms form").hide();
$(".forms #" + id).show();
}
/* form {
margin-left: 10px;
}
ul {
padding-left: 0;
}
.calc {
background-color: rgb(246, 246, 246);
color: black;
padding: 10px 0px 10px 10px;
border-bottom: 1px solid #dedede;
text-align: left;
font-size: 15px;
line-height: 24px;
cursor: pointer;
list-style-type: none;
margin-bottom: -.1px;
}
.link {
display: block;
color: black;
}
.focus {
color: #005aaa;
}
.title {
background-color: rgb(0, 90, 170);
color: rgb(255, 255, 255);
font-size: 22px;
font-weight: 600;
line-height: 26px;
padding: 10px 0px 10px 10px;
margin-bottom: 0px;
}
.calculatorList {
color: rgb(255, 255, 255);
font-size: 22px;
font-weight: 600;
line-height: 26px;
padding: 10px 0px 10px 10px;
list-style-type: none;
cursor: pointer;
}
p {
padding-top: 10px;
margin-bottom: 0px;
} */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-4">
<ul class="calculatorList">
<li>
<a class="link">Generating Customer Caclulations</a>
</li>
</ul>
<ul>
<li>
<a class="link" data-id="cacls1">Calculators</a>
</li>
</ul>
<ul class="calc-nav">
<li class="calc">
<a class="link" data-id="form1">Lifetime Value Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form2">Breakeven Analysis</a>
</li>
<li class="calc">
<a class="link" data-id="form3">Total Audience Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form4">Number of Offers Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form5">Margin Calculator</a>
</li>
</ul>
</div>
<div class="col-md-8 forms">
<form id="form1">
<h3>Lifetime Value Calculator</h3>
<p>Calculator which determines the lifetime value of a customer</p>
<p>The average dollar amount of a client's reorder: </p>
<input value="" type="text" class='num1' placeholder="$50.00" />
<p> How many times per year does an average client buy from you? </p>
<input value="" type="text" class='num2' placeholder="12" />
<p> On average, how many years does a client continue doing business with you? </p>
<input value="" type="text" class='num3' placeholder="6" />
<p>Customer Lifetime Value: </p>
<input value="" type="text" class='total' placeholder="$3000.00" readonly/>
</form>
<form id="form2">
<h3>Breakeven Analysis Calculator</h3>
<p> Calculator which determines your breakeven analysis</p>
<p> Customer Lifetime Value: </p>
<input value="" type="text" class='num1' placeholder="$3000.00" />
<p> Gross Margin Percentage: </p>
<input value="" type="text" class='num2' placeholder="60.00%" />
<p> Marin Per Customer: </p>
<input value="" type="text" class='total1' placeholder="$1800.00" readonly/>
<p> Monthly Advertising Spend: </p>
<input value="" type="text" class='num3' placeholder="$2000.00" />
<p> Number of Customers to breakeven:
<p>
<input value="" type="text" class='total2' placeholder="1.11" readonly/>
</form>
<form id="form3">
<h3>Total Audience Calculator</h3>
<p>Calculator which determines your total audience</p>
<p> Number of residence mailed: </p>
<input value="" type="text" class='num1' placeholder="50,000" />
<p> Average Number of people per residence: </p>
<input value="" type="text" class='num2' placeholder="4.25" />
<p> Total potential audience </p>
<input value="" type="text" class='total' placeholder="212,500" readonly/>
</form>
<form id="form4">
<h3>Number of Offers</h3>
<p>Calculator which determines your total number of offers</p>
<p>Number of residence mailed: </p>
<input value="" type="text" class='num1' placeholder="50,000" />
<p> Number of Coupons: </p>
<input value="" type="text" class='num2' placeholder="6" />
<p> Total number of coupons </p>
<input value="" type="text" class='total' placeholder="300,000" readonly/>
</form>
<form id="form5">
<h3>Margin Calculator</h3>
<p>Calculator which determines your margins</p>
<p>Revenue: </p>
<input value="" type="text" class='num1' placeholder="$3000.00" />
<p> Cost of Goods Sold: </p>
<input value="" type="text" class='num2' placeholder="$2250.00" />
<p> Margin: </p>
<input value="" type="text" class='total1' readonly placeholder="750.00" readonly/>
<p> Margin Percentage: </p>
<input value="" type="text" class='total2' readonly placeholder="25%.00" readonly/>
</form>
</div>
</div>
To save space I have put this in a fiddle: https://jsfiddle.net/so4y0nb2/15/

I've updated the jsFiddle based on your comment.
This time I took a lot more liberty with what you had and tried to put it together a way I might approach it. It's far from perfect and leaves a lot to be desired, but it should be of some help.
HTML:
<div class="row">
<div class="col-md-4">
<!-- I removed the <ul> and instead created a standalone <a>, I wasn't sure what purpose have everything in a <ul> served -->
Generating Customer Caclulations
<!-- Same container for calculators but I changed the <p> Calculators into an <a> -->
<div id="calc-nav-container">
Calculators
<ul id="calc-nav" class="calculatorList">
<li class="calc">
<a class="link" data-id="form1">Lifetime Value Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form2">Breakeven Analysis</a>
</li>
<li class="calc">
<a class="link" data-id="form3">Total Audience Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form4">Number of Offers Calculator</a>
</li>
<li class="calc">
<a class="link" data-id="form5">Margin Calculator</a>
</li>
</ul>
</div>
</div>
<!-- the forms start here... -->
</div>
CSS:
#calc-nav-container,
#forms,
#forms form,
#calc-nav {
display: none;
}
#calc-nav-container.open,
#forms.open,
#forms form.open,
#calc-nav.open {
display: block;
}
jQuery:
$(document).ready(function(){
// Instead of hiding elements on document ready, I set the them to display none in CSS
// Prevent default behavior of anchors with #
$("a[href='#']").on('click', function(e){
e.preventDefault();
})
})
// When 'Generating Customer Calculations' is clicked
$('#gen-cust-calc').on('click', function(){
// Show both the calculator container and the first button
$('#calc-nav-container, #calc-button').toggleClass('open');
});
// When 'Calculators' is clicked
$('#calc-button').on('click', function(){
$('#calc-nav, #forms').toggleClass('open');
});
// Handle click for calculators
$("#calc-nav li a").on("click", function() {
toggleForms($(this).data("id"));
});
// I like to use classes instead of the .show() or .hide() methods because I don't like the inline styles they add
function toggleForms(id) {
// Remove any open class
$('#forms form').removeClass('open');
// Toggle open on the clicked form
$('#' + id).toggleClass('open');
}

Categories