Problems /w Recipe Box HTML

#1

Hello.

I’m currently trying to make my way through the data vis challenges and right now I’m having troubles trying to create my collapsing panels for the Recipe Box Challenge. Here is my HTML, I have bootstrap and jQuery installed with NPM. All of this appears when I run the program, it just doesn’t have any of the panels, and the click on the <a> does nothing. Please help

          <div className="panel-group" id="accordion">
            <div className="panel panel-default">
              <h4 className="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                Chocolate Chip Cookies </a>
                </h4>
              </div>
              <div id="collapse1" className="panel-collapse collapse in">
                <div className="panel-body">
                  Ingredients:
                      <ul>
                      <li>Flour</li>
                      <li>Sugar</li>
                      <li>Brown Sugar</li>
                      <li>Butter</li>
                      <li>Water</li>
                      <li>Vanilla Extract</li>
                      <li>Chocolate Chips</li>
                      </ul>

                  Instructions:
                      <ul>
                      <li>Stir the wet ingredients together in one bowl and the dry ingredients together in another</li>
                      <li>Combine the two bowls</li>
                      <li>Lay out on a baking sheet and bake at 350º until golden brown</li>
                      <li>Let Cool for 20 Minutes </li>
                      </ul>
                </div>
              </div>
            </div>
#2
  1. Your panel-title should be inside a div with the class panel-header.
  2. It looks like your panel-body and its containing div are outside of the panel div. Make sure they’re within the panel div.
  3. Collapsing relies on Bootstrap’s JavaScript. Is that included in the bootstrap package on NPM?

The Bootstrap JavaScript link is on Bootstrap download page
You can see panels in action in Bootstrap’s Components documentation
And here’s the docs on Bootstrap’s Collapse plugin

Also, I used react-bootstrap for my Recipe Box, which I found to be pretty nice to work with.

I hope I helped, let me know if there’s anything else!

#3