Anchor tag toggle not working

Anchor tag toggle not working
0

#1

I am not sure why my code isn’t working. Essentially, all the listed calculators should not appear until I click on ‘Generating Customer Calculations’. But they appear on page load. Any thoughts?

div class="row">
  <div class="col-md-4">
    <ul class="calculatorList">
      <li>
        <a class="link">Generating Customer Caclulations</a>
      </li>
   </ul>
   
   <div class="cal-nav-container">
      <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>

  <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>

And here is my jquery code.

 $(".forms form").hide();
  

  $('.calculatorList a').on('click', function(){
    $('.cal-nav-container').toggleClass('open');

    }); 

    $(".calc-nav li a").on("click", function() {
        toggleForms($(this).data("id"));
        $(this).parent().siblings().find("a").removeClass("focus");
        $(this).addClass("focus")
    }); 

    // $(".calc-nav li:first a").click();

    function toggleForms(id) {
        $(".forms form").hide();
        $(".forms #" + id).show();
    }