CODEWITHSUNDEEP
javascripthtmljquerycss
Ashneil Sakhrani
Ashneil Sakhrani

Reputation: 11

I cannot get the collapse function to work on Bootstrap

I have tried to make an accordion with bootstrap but for some reason when I try to use it the accordion will not expand to show the contents. Can someone explain what I am doing wrong?

<div class="accordion accordion-flush" id="accordionFlushExample">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-headingOne">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                    Filters
                    </button>
                    </h2>
                    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                        <div class="accordion-body">
                            <ul>
                                <li><a href="/recipes">All Recipes</a></li>
                                <li><a href="/recipes?mealtype=your">My Recipes</a></li>
                                <li><a href="/recipes?mealtype=breakfast">Breakfast Recipes</a></li>
                                <li><a href="/recipes?mealtype=lunch">Lunch Recipes</a></li>
                                <li><a href="/recipes?mealtype=dinner">Dinner Recipes</a></li>
                                <li><a href="#">Vegeterian Recipes</a></li>
                                <li><a href="#">Vegan Recipes</a></li>
                                <li><a href="#">Low Calorie Recipes</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

Common solutions to similar questions I have seen online point to jquery script not being run but I have the following scripts in the following order:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-popRpmFF9JQgExhfw5tZT4I9/CI5e2QcuUZPOVXb1m7qUmeR2b50u+YFEYe1wgzy" crossorigin="anonymous"></script>

Upvotes: 1

Views: 2131

Answers (3)

Ricky Levi
Ricky Levi

Reputation: 7987

(bootstrap 5)

I just wrapped the collapsable sections with a div + id, then gave a data-bs-parent to each div that i have a collapse class for.

# radio button group
<div class="row">
    <label class="col-12 col-md-8 col-form-label">
        What is your choice ?
    </label>
    <div class="col-12 col-md-4">
        <div class="btn-group btn-group-sm" role="group">
            <input type="radio" class="btn-check" name="myRadio" value="yes" id="msg1"
                   aria-expanded="false"
                   aria-controls="msg1"
                   data-bs-toggle="collapse"
                   data-bs-target="#msg1">

            <label class="btn btn-outline-primary" for="msg1">Msg 1</label>

            <input type="radio" class="btn-check" name="myRadio" value="no" id="msg2"
                   aria-expanded="false"
                   aria-controls="msg2"
                   data-bs-toggle="collapse"
                   data-bs-target="#msg2">

            <label class="btn btn-outline-primary" for="msg2">Msg 2</label>
        
        </div>
    </div>
</div>

<div class="row">
  <div class="col" id="display_data">        <!-- id wrapping all collapsed divs -->
      <div class="alert alert-warning collapse" id="msg1" data-bs-parent="#display_data">
          <strong>Yes</strong><br>
          this is msg 1
      </div>
      <div class="alert alert-warning collapse" id="msg2" data-bs-parent="#display_data">
          <strong>No</strong><br>
          this is msg 2
      </div>
  </div>
</div>

jsFiddle: https://jsfiddle.net/2ud7zcth/1/

Upvotes: 2

Tom Esposito
Tom Esposito

Reputation: 165

Your HTML appears to be fine. As others have stated jQuery is not needed here. I see you're using the Alpha CDN, I would suggest using the beta version as it's more stable. Changing the JS to use this should be all you need to do:

https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

Upvotes: 0

inoabrian
inoabrian

Reputation: 3800

OP is using version 5 of Bootstrap

I added the official css & js links. Bootstrap 5 has removed the jQuery dependency

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <div class="accordion accordion" id="accordionFlushExample">
                <div class="accordion-item">
                    <h2 class="accordion-header" id="flush-headingOne">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                    Filters
                    </button>
                    </h2>
                    <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                        <div class="accordion-body">
                            <ul>
                                <li><a href="/recipes">All Recipes</a></li>
                                <li><a href="/recipes?mealtype=your">My Recipes</a></li>
                                <li><a href="/recipes?mealtype=breakfast">Breakfast Recipes</a></li>
                                <li><a href="/recipes?mealtype=lunch">Lunch Recipes</a></li>
                                <li><a href="/recipes?mealtype=dinner">Dinner Recipes</a></li>
                                <li><a href="#">Vegeterian Recipes</a></li>
                                <li><a href="#">Vegan Recipes</a></li>
                                <li><a href="#">Low Calorie Recipes</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
    </div>
  </body>

  <script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
    crossorigin="anonymous"
  ></script>
</html>

Upvotes: 1

Related Questions