title: Jquery clicking on Li not doing show/hide as it should
body: <p>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 &quot;a&quot; 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.</p>
  <p>Here is the code</p>
  <p>html:</p>
  <pre><code>    &lt;div class=&quot;faq-intro&quot;&gt;
        &lt;div class=&quot;faq-list&quot;&gt;
          &lt;ul id=&quot;main-nav&quot;&gt;
            &lt;li class=&quot;nav active&quot;&gt;&lt;a href=&quot;#shipping&quot;&gt;Shipping&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav&quot;&gt;&lt;a href=&quot;#returns&quot;&gt;returns&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav&quot;&gt;&lt;a href=&quot;#custom&quot;&gt;Custom Orders&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav&quot;&gt;&lt;a href=&quot;#replacements&quot;&gt;Replacements/ Warranty&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav&quot;&gt;&lt;a href=&quot;#mostFAQs&quot;&gt;Most Frequently Asked Questions&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav&quot;&gt;&lt;a href=&quot;#RAD&quot;&gt;RAD Principles&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav&quot;&gt;&lt;a href=&quot;#environmental&quot;&gt;Environmental Stewardship&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;nav&quot;&gt;&lt;a href=&quot;#USA&quot;&gt;MADE in the USA&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;second-faq-container&quot;&gt;
  
        &lt;div class=&quot;faq-container&quot;&gt;
          main section content
        &lt;/div&gt;
        &lt;div class=&quot;faq-container&quot;&gt;
          main section content
        &lt;/div&gt;
        &lt;div class=&quot;faq-container&quot;&gt;
          main section content
        &lt;/div&gt;
        &lt;div class=&quot;faq-container&quot;&gt;
          main section content
        &lt;/div&gt;
        &lt;div class=&quot;faq-container&quot;&gt;
          main section content
        &lt;/div&gt;
        &lt;div class=&quot;faq-container&quot;&gt;
          main section content
        &lt;/div&gt;
        &lt;div class=&quot;faq-container&quot;&gt;
          main section content
        &lt;/div&gt;
        &lt;div class=&quot;faq-container&quot;&gt;
          main section content
        &lt;/div&gt;
  
      &lt;/div
  
  
  </code></pre>
  <p>js</p>
  <pre><code>
  
    constructor($navigation, $content) {
      this.$navigation = $navigation;
      this.$content = $content;
  
    }
      this.$navigation.on(&quot;click&quot;, &quot;.nav&quot;, (event) =&gt; {
            this.$content.hide();
            $(this.$content[$(target).index()]).show();
      });
  </code></pre>
  <p>the parameters being used are:</p>
  <pre><code>  new Faq($(&quot;#main-nav&quot;), $(&quot;div.faq-container&quot;));
  </code></pre>