First off, I know my code isn’t properly formatted and I do apologize. So i am working on some jquery and I have 4 links in my side nav bar, each one toggles a different form. Basically i want to be able to have the links change to blue when they are clicked on, and when a new one is clicked, the original turns back to black, and the new one to blue. Here is my html
<div class="row">
<div class="col-md-4">
<h3 class="title">Calculators</h3>
<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>
</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>
The average dollar amount of a client's reorder: <br>
<input value="" type="number" class='num'/><br/>
How many times per year does an average client buy from you? <br>
<input value="" type="number" class='num'/><br/>
On average, how many years does a client continue doing business with you? <br>
<input value="" type="number" class='num'/><br/>
Customer Lifetime Value: <br>
<input value="" type="number" class='tot'/>
</form>
<form id="form2">
<h3>Breakeven Analysis Calculator</h3>
<p>Calculator which determines your breakeven analysis</p>
Customer Lifetime Value: <br>
<input value="" type="number" class='field1'/><br/>
Gross Margin Percentage: <br>
<input value="" type="number" class='field2' /><br/>
Marin Per Customer: <br>
<input value="" type="number" class='field3'/><br/>
Monthly Advertising Spend: <br>
<input value="" type="number" class='field4'/><br/>
Number of Customers to breakeven: <br>
<input value="" type="number" class='field5'/><br/>
</form>
<form id="form3">
<h3>Total Audience Calculator</h3>
<p>Calculator which determines your total audience</p>
Number of residence mailed: <br>
<input value="" type="number" class='number1'/><br/>
Average Number of people per residence: <br>
<input value="" type="number" class='number2' /><br/>
Total potential audience <br>
<input value="" type="number" class='number3'/><br/>
</form>
<form id="form4">
<h3>Number of Offers</h3>
<p>Calculator which determines your total number of offers</p>
Number of residence mailed: <br>
<input value="" type="number" class='input1'/><br/>
Number of Coupons: <br>
<input value="" type="number" class='input2' /><br/>
Total number of coupons <br>
<input value="" type="number" class='input3'/><br/>
</form>
</div>
</div>
The jquery I do have loads the first form automatically (which i want). i know you can add and remove classes, but not sure how to turn the class back off after you click to a new link
$('.calc-nav li a').on('click', function() {
toggleForms($(this).data('id'));
});