1

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>
Ari K
  • 445
  • 1
  • 4
  • 6

2 Answers2

0

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

Community
  • 1
  • 1
JordRoss
  • 72
  • 3
  • 8
0

Example you mentioned is using bootstrap3. Try attaching bootstrap3 to your external resources instead or add them at the top of html like so

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

Working jsfiddle https://jsfiddle.net/highestblue/hcq3wk1f/

If you want to use bootstrap4, refer to http://v4-alpha.getbootstrap.com/components/collapse/

Grant
  • 218
  • 1
  • 5
  • 15