CODEWITHSUNDEEP
javascriptjqueryhtmlcsstoggle
Christian Luneborg
Christian Luneborg

Reputation: 511

jQuery toggle does not trigger at all

DEMO

Why is the jquery toggle not triggering anything to collapse the description? I tried to move the CDNJS link in the header - nothing, moved down inside & outside of the body tag nothing is working. It only works on JSFIDDLE

Before I decide to post this I researched and found some similar issues, but still didnt work for me. Am I missing something here.

HTML -

<div class="parent-container">
<ul class="faq">
<li>
  <h3 class="question">SVRS Header 1
    <div class="plus-minus-toggle collapsed"></div>
  </h3>
  <div class="answer">Donec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis <br><br>
    ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed 
    fermentum risus. Phasellus venenatis ultricies dignissim.</div>
</li>
<li>
  <h3 class="question">SVRS Header 2
    <div class="plus-minus-toggle collapsed"></div>
  </h3>
  <div class="answer">onec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis <br><br>
    ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed 
    fermentum risus. Phasellus venenatis ultricies dignissim.</div>
</li>
 <li>
  <h3 class="question">SVRS Header 3
    <div class="plus-minus-toggle collapsed"></div>
  </h3>
  <div class="answer">onec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis <br><br>
    ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed 
    fermentum risus. Phasellus venenatis ultricies dignissim.</div>
</li>
</ul>
</div>

JS toggle - 

$('.faq li .question').click(function () {
$(this).find('.plus-minus-toggle').toggleClass('collapsed');
$(this).parent().toggleClass('active');
});

CSS 

.parent-container {
padding: 0 20px 0 20px;
max-width: 800px;
width: 100%;
}

.faq {
 list-style: none;
 padding-left: 40px;
 padding-right: 20px;
}

.faq li.active .answer {
max-height: 275px !important;
transition: max-height 0.5s ease, padding-bottom 0.5s ease;
}

.faq li.active .question {
color: #808080;
transition: color 0.5s ease;
}

.faq .answer {
color: #090909;
font-family: serif;
font-size: 16px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, padding-bottom 0.5s ease;
}

.faq .plus-minus-toggle {
cursor: pointer;
height: 20px;
position: absolute;
width: 20px;
left: -40px;
top: 50%;
z-index: 2;
}

.faq .plus-minus-toggle:before, .faq .plus-minus-toggle:after {
background: #000;
content: "";
height: 5px;
left: 0;
position: absolute;
top: 0;
width: 20px;
transition: transform 500ms ease;
}

.faq .plus-minus-toggle:after {
transform-origin: center;
}

.faq .plus-minus-toggle.collapsed:after {
transform: rotate(90deg);
}

.faq .plus-minus-toggle.collapsed:before {
transform: rotate(180deg);
}

.faq .question {
color: #090909;
font-family: sans-serif;
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
position: relative;
cursor: pointer;
padding: 5px 0;
transition: color 0.5s ease;
}

@media screen and (max-width: 767px) {
.faq .question {
font-size: 18px;
}

}

Upvotes: 0

Views: 59

Answers (1)

Aaron
Aaron

Reputation: 1727

The answer can be obtained via the console: Uncaught ReferenceError: $ is not defined

This error occurs because you use jQuery syntax / functions BEFORE you load the jQuery library.

A visulization in a minimal way is something like this:

console.log(a);
let a = "test";

To run your website you should place the jQuery script loading tag ALWAYS in the head section BEFORE your custom coding stuff.

Your website should look like this:

<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script>
//do jQuery here
</script>
</head>

Upvotes: 2

Related Questions