user3089095 user3089095 - 12 days ago 3
Javascript Question

Attempting a +/- icon change on accordion dropdown, but the Javascript file won't seem to load locally in my HTML. (Bootstrap 4)

Absolute 100% JS beginner here, so bear with me please. I've scoured the web for the past few days and haven't found anything helpful. I'm using Bootstrap 4 and am attempting to build an accordion with a +/- icon that changes on expansion and contraction. I'm basically just trying to recreate this example: http://www.bootply.com/89084#

My basic JSFiddle mostly works, although it doesn't collapse the accordion when a different one opens (bonus points if you can help me with that).
https://jsfiddle.net/fufwwy7j/2/

However when I load the HTML file locally I get a 'Uncaught ReferenceError: $ is not defined' error. I assume this is what's causing the problem? Both the HTML and JS files are located in the same folder, so the script tag in my

<head>
section just reads
<script src="plusminus.js"></script>
.



$('.collapse').on('show.bs.collapse', function() {
$(this).parent().find(".fa-plus").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function() {
$(this).parent().find(".fa-minus").removeClass("fa-minus").addClass("fa-plus");
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://use.fontawesome.com/ef3ff7fda3.js"></script>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="fa fa-plus float-xs-right"></span>
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Text
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<span class="fa fa-plus float-xs-right"></span>
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Text
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<span class="float-xs-right fa fa-plus"></span>
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Text
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>




Answer

You need a script tag that references jquery: Uncaught ReferenceError: $ is not defined?

Comments