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
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>