Bootstrap collapsable not working in my template

Question

I am trying to add a collapsible section on my page using bootstrap. The goal would be to have the table of objects shown after the button is clicked. However, at the moment not even the example on the Bootstrap website is working. The problem part is the following:

<p>
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Link with href
    </a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Button with data-target
    </button>
</p>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
</div>

The entire code looks as follows:

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script>
        $('#toggle').click(function() {
            $('form').toggle('slow');
        });
    </script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello world!</title>
</head>

<body>
    <h3 class="text-success">Add Sensor</h3>
    <br>

    <!--    <form style="display:none;" method="post">-->
    <form method="post">
        {% csrf_token %}
        <div class="row align-items-center">
            <div class="col-sm-8">
                <table>
                    {{ sensor_form.as_table}}
                </table>
                <div class="mx-sm-2">
                    <input type="submit" value="Submit">
                </div>

                <br>
                <br>

                <p>
                    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                    Link with href
                </a>
                    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                        Button with data-target
                    </button>
                </p>
                <div class="collapse" id="collapseExample">
                    <div class="card card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                    </div>
                </div>

                <br>
                <br>

                <h3 class="text-success">View Sensors</h3>

                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Sensor ID</th>
                            <th scope="col">Sensor Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        {%for obj in sensors_list%}
                        <tr>
                            <td>{{obj.sensor_id}}</td>
                            <td>{{obj.sensor_name}}</td>
                            <!--                        <th scope="row">1</th>-->
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </form>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

</body>

</html>

I know the code could be better aligned, I plan on doing that once this version gets working

It looks like you've put your table outside of the collapsible div. Correct me if I'm wrong on that though. That's just how it is reading to me. — Mark Hill, Jun 11 '19 at 14:37
Yes, the code I put is just for the example in here: https://getbootstrap.com/docs/4.0/components/collapse/ for button data with target. And that isn't working either — Andrei, Jun 11 '19 at 14:40
I have left you an answer see if something like this helps, but I will try to help you fix this as much as possible. — Mark Hill, Jun 11 '19 at 14:43

score 0 · Answer 1 · answered Jun 11 '19 at 14:42

So from what I can see, you've got a few things out of place, but after comparing to the documentation here is what I can come up with as far as a viable solution for you.

One of the other issues is that in your table it looks like you are missing the initial start of the tbody tag so I have edited that in here for the answer as well.

<div class="card">
    <div class="card-header" id="headingThree">
         <h2 class="mb-0">
            <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTable" aria-expanded="false" aria-controls="collapseTable">
              Collapsible Group Item #3
            </button>
        </h2>
    </div>
    <div id="collapseTable" class="collapse" aria-labelledby="collapseTable">
      <div class="card-body">
        <h3 class="text-success">View Sensors</h3>

        <table class="table">
           <thead>
               <tr>
                   <th scope="col">Sensor ID</th>
                   <th scope="col">Sensor Name</th>
               </tr>
           </thead>
           <tbody>
                {%for obj in sensors_list%}
                <tr>
                    <td>{{obj.sensor_id}}</td>
                    <td>{{obj.sensor_name}}</td>
    <!--            <th scope="row">1</th>-->
                </tr>
             {% endfor %}
           </tbody>
         </table>
      </div>
    </div>
</div>

Thanks Mark, I added it but it doesn't seem to work. It does create a clickable link but when I click it there is nothing happening. Not sure why that might be — Andrei, Jun 11 '19 at 14:57

score 0 · Accepted Answer · edited Jun 12 '19 at 06:53

Main reason is you have not added bootstrap.js on your code, here is working example of it with proper alignment of link and script

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

  <title>Hello world!</title>
</head>

<body>
  <h3 class="text-success">Add Sensor</h3>
  <br>

  <!--<form style="display:none;" method="post">-->
  <form method="post">
    {% csrf_token %}
    <div class="row align-items-center">
      <div class="col-sm-8">
        <table>
          {{ sensor_form.as_table}}
        </table>
        <div class="mx-sm-2">
          <input type="submit" value="Submit">
        </div>
        <br>
        <br>
        <p>
          <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                Link with href
            </a>
          <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    Button with data-target
                </button>
        </p>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
          </div>
        </div>
        <br>
        <br>
        <h3 class="text-success">View Sensors</h3>
        <table class="table">
          <thead>
            <tr>
              <th scope="col">Sensor ID</th>
              <th scope="col">Sensor Name</th>
            </tr>
          </thead>
          <tbody>
            {%for obj in sensors_list%}
            <tr>
              <td>{{obj.sensor_id}}</td>
              <td>{{obj.sensor_name}}</td>
              <!--<th scope="row">1</th>-->
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </form>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script>
    $('#toggle').click(function() {
      $('form').toggle('slow');
    });
  </script>

</body>

</html>

Bootstrap collapsable not working in my template

2 Answers2