javascript collapse doesnt work : <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>
