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>