title: javascript collapse doesnt work
body: <p>Hello Stackoverflow community,
  i got this code for faq collapse but it doesnt work</p>
  
  <p>HTML</p>
  
  <pre><code>   &lt;a href="#" class="togglefaq"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt; How do you tell an introverted computer scientist from an extroverted computer scientist?&lt;/a&gt;
            &lt;div class="faqanswer"&gt;
              &lt;p&gt;An extroverted computer scientist looks at &lt;em&gt;your&lt;/em&gt; shoes when he talks to you.
  &lt;/p&gt;
     &lt;/div&gt;
  
  &lt;br&gt;
         &lt;a href="#" class="togglefaq"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt; How many programmers does it take to change a light bulb?&lt;/a&gt;
            &lt;div class="faqanswer"&gt;
               &lt;p&gt;None, that's a hardware problem.
  &lt;/p&gt;
     &lt;/div&gt;
  &lt;br&gt;
  
          &lt;a href="#" class="togglefaq"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt; What's the object-oriented way to become wealthy?&lt;/a&gt;
            &lt;div class="faqanswer"&gt;
               &lt;p&gt;Inheritance.
  &lt;/p&gt;
     &lt;/div&gt;    
     &lt;br&gt;
  
             &lt;a href="#" class="togglefaq"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt; Why do programmers like UNIX?&lt;/a&gt;
            &lt;div class="faqanswer"&gt;
               &lt;p&gt;unzip, strip, touch, finger, grep, mount, fsck, more, yes, fsck, fsck, fsck, umount, sleep
  &lt;/p&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/* FAQ COLLAPSE/EXPAND STYLES */
  * {
    box-sizing: border-box;
  }
  body{
    background-color:black;
  }
  .faqanswer {
      display: none;
      width: 590px;
      padding: 12px 20px 0 30px;
    background-color:white;
  
  }
  
  .faqanswer p {
      font-size: 13px;
      line-height: 17px;  
      padding-bottom: 20px;
    color:#2b2d39;
  
  }
  
  
  a.active {
      font-weight: bold;
  }
  
  .togglefaq {
      text-decoration: none;
      color: #2b2d39;
      font-size: 13px;
      padding: 10px 30px;
      line-height: 20px;
      display: block;
      width: 590px;
      margin-bottom: -1px;
      background-color:white;
  }
  .icon-plus {
      color: #1c1e2b;
      margin-right: 20px;
      font-size: 20px;
      float:right;
  }
  
  .icon-remove {
      color: #1c1e2b;
      font-size: 20px;
      float:right;
  }
  p {
    margin: 0;
  }
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>&lt;script&gt;
  //faq toggle stuff 
  $('.togglefaq').click(function(e) {
  e.preventDefault();
  var notthis = $('.active').not(this);
  notthis.find('.icon-remove ').addClass('icon-plus').removeClass('icon-remove ');
  notthis.toggleClass('active').next('.faqanswer').slideToggle(300);
   $(this).toggleClass('active').next().slideToggle("fast");
  $(this).children('i').toggleClass('icon-plus icon-remove ');
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>on the codepen it works
  <a href="https://codepen.io/mrs_snow/pen/vEvzaL" rel="nofollow noreferrer">https://codepen.io/mrs_snow/pen/vEvzaL</a></p>
  
  <p>but when i add it to my website it doesn't</p>