Jquery clicking on Li not doing show/hide as it should

Question

I am having an issue with my jquery not showing and hiding the appropriate elements. I have a list of items that pertain to a specific section for an FAQ, and when each Li is clicked, it should hide all of the sections except the one it belongs to. This was working just fine, until I added "a" tags inside of the li's, because each needs to have a specific link. When I did this, for some reason, only the first section is shown and all of the other ones are not, no matter which one I click.

Here is the code

html:

    <div class="faq-intro">
      <div class="faq-list">
        <ul id="main-nav">
          <li class="nav active"><a href="#shipping">Shipping</a></li>
          <li class="nav"><a href="#returns">returns</a></li>
          <li class="nav"><a href="#custom">Custom Orders</a></li>
          <li class="nav"><a href="#replacements">Replacements/ Warranty</a></li>
          <li class="nav"><a href="#mostFAQs">Most Frequently Asked Questions</a></li>
          <li class="nav"><a href="#RAD">RAD Principles</a></li>
          <li class="nav"><a href="#environmental">Environmental Stewardship</a></li>
          <li class="nav"><a href="#USA">MADE in the USA</a></li>
        </ul>
      </div>
    </div>
    <div class="second-faq-container">

      <div class="faq-container">
        main section content
      </div>
      <div class="faq-container">
        main section content
      </div>
      <div class="faq-container">
        main section content
      </div>
      <div class="faq-container">
        main section content
      </div>
      <div class="faq-container">
        main section content
      </div>
      <div class="faq-container">
        main section content
      </div>
      <div class="faq-container">
        main section content
      </div>
      <div class="faq-container">
        main section content
      </div>

    </div

js

  constructor($navigation, $content) {
    this.$navigation = $navigation;
    this.$content = $content;

  }
    this.$navigation.on("click", ".nav", (event) => {
          this.$content.hide();
          $(this.$content[$(target).index()]).show();
    });

the parameters being used are:

  new Faq($("#main-nav"), $("div.faq-container"));

Answer 1

The handling tweak is in the navigation handler on .nav. I moved that handling into the constructor for getting errors with the code as-is, without the rest of the class.

Try the runnable example below. I added a number to each section content to show which reference appears with the relative link that is clicked.

class Faq {
  constructor($navigation, $content) {
    this.$navigation = $navigation;
    this.$content = $content;
  
    this.$navigation.on("click", ".nav", (event) => {
        this.$content.hide();
        // The event.target references <a> tags, so use
        // the related index based those tags within the parent.
        $(this.$content[$('#main-nav li a').index(event.target)]).show();
    });
  }
}
 
new Faq($("#main-nav"), $("div.faq-container"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="faq-intro">
      <div class="faq-list">
        <ul id="main-nav">
          <li class="nav active"><a href="#shipping">Shipping</a></li>
          <li class="nav"><a href="#returns">returns</a></li>
          <li class="nav"><a href="#custom">Custom Orders</a></li>
          <li class="nav"><a href="#replacements">Replacements/ Warranty</a></li>
          <li class="nav"><a href="#mostFAQs">Most Frequently Asked Questions</a></li>
          <li class="nav"><a href="#RAD">RAD Principles</a></li>
          <li class="nav"><a href="#environmental">Environmental Stewardship</a></li>
          <li class="nav"><a href="#USA">MADE in the USA</a></li>
        </ul>
      </div>
    </div>
    <div class="second-faq-container">

      <div class="faq-container">
        main section content 1
      </div>
      <div class="faq-container">
        main section content 2
      </div>
      <div class="faq-container">
        main section content 3
      </div>
      <div class="faq-container">
        main section content 4
      </div>
      <div class="faq-container">
        main section content 5
      </div>
      <div class="faq-container">
        main section content 6
      </div>
      <div class="faq-container">
        main section content 7
      </div>
      <div class="faq-container">
        main section content 8
      </div>

    </div>