Anchor tag toggle not working

JavaScript
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();
    }
2

Hey there!

Try out this code:

I fixed some minor syntax errors you had in the HTML, and added jQuery to toggle the close/open class (added via CSS) when clicking on ‘Generating Customer Calculations’. Now if you click on that link, it will toggle the calculator options as well as the clicking on the individual calculator options will toggle each calculator separately. Is this what you were going for?

HTML:

<div class="row">
<div class="col-md-4">
  <a class="gen-link">Generating Customer Caclulations</a>

  <div class="cal-nav-container open">
    <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:
      <input value="" type="text" class='total2' placeholder="1.11" readonly /></p>
  </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>

jQuery:

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

$('.gen-link').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();
}

CSS:

.open {
  display: none
}