Having trouble getting the collapsible feature to function properly in my template, despite

I'm attempting to implement a collapsible section on my webpage using Bootstrap. The objective is to display the table of objects after clicking the button. However, currently, even the sample code provided on the Bootstrap website isn't functioning as expected. The issue lies in the following code snippet:

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

Below is the entire code structure:

<!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 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>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </form>

    <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 acknowledge that the code could be better organized, but I will handle that once this version is functional.

htmlcssbootstrap-4collapsable

Answer №1

The primary issue is that bootstrap.js has not been included in your code. Here is a working example with proper alignment of the 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 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>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </form>

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

Answer №2

Upon review, it appears that there are a few elements misplaced in your code. After consulting the documentation, I have identified a potential solution for you.

Another issue is that the tbody tag seems to be missing from your table. I have made the necessary edits in the provided code snippet below.

<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>
                </tr>
             {% endfor %}
           </tbody>
         </table>
      </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Focusing solely on a particular category in EJS

I am struggling with this code snippet. HTML: <header<% if ( current.source === 'features' || current.path[0] === 'index' || current.source !== 'customers' ) { %> class="header-white"<% } %>> <div cl ...

javascriptcssejsharp

Creating a grid table with dimensions 4x3, where two specific items will occupy 50% of the height

I am working on creating a grid table with two items having a height of 50% each. Here is the current structure of my HTML and Sass code: <div class="grid"> <div class="grid__list"> <div class="grid__item">1</div> ...

htmlcsssasscss-grid

Having trouble getting CSS animation to work on Mozilla using mozAnimationName?

<style> @keyframes shake { 0% { -moz-transform:scale(0);opacity:0; } 25% { -moz-transform:scale(1.3);opacity:1; } 50% { -moz-transform:scale(0.7);opacity:1; } 75% { -moz-transform:scale(2); ...

javascriptcsscss-animations

Adding ordered lists using innerHTML in Angular are a fabulous way to organize and

Currently, my Angular CLI version is 13.3.6 with Node v16.12.0 and I'm encountering an issue when trying to utilize the innerHTML property. Within my Typescript file, I have a variable containing an ordered list like the following: let myText = "< ...

htmlangular

Is it possible for browsers to provide autocomplete support for login forms that are loaded via ajax?

I'm having an issue with the autocomplete feature in browsers (IE & FF) not working for my login form. In my webapp using CakePHP and jQuery, I have a login form inside a div that is loaded via AJAX to allow visitors to login or register without relo ...

phpjqueryhtmlautocompletecross-browser

`Ineffective Sass import within asset pipeline``

Within our Rails 3.2 app, I've implemented Sass imports to manage the majority of our styles. The structure of my application.css.scss file is as follows: application.css /* *= require_self *= require_tree ./vendor *= require admin */ admin.css ...

cssruby-on-railssassasset-pipeline

Retrieve the data attribute of the "root" element within the React.js DOM

Imagine there is a <div> element within an HTML file: I am looking to transfer the attribute data-person-name from that particular <div>, which has the ID of root, to a React element. <div id="root" data-person-name="John"></div> ...

javascripthtmlreactjsfrontend

Use VueJS v-on:click and Vanilla JS to collapse various divs when clicked

Can VueJS and vanilla JS be used to collapse specific divs among many? I have information contained in separate card elements that include a title and a body. My goal is to make the body of each card expand or collapse when the respective title is clicked ...

javascripthtmlcssvue.js

Displaying rounded legends in a rectangular fieldset using Reactstrap

When trying to incorporate BootStrap4 with my Reactjs, I encountered an issue. The styling of btn btn-primay works perfectly fine, but the square shape of the fieldset seems to be missing. I referred to the demo for help. Here are the snippets to replicat ...

reactjsbootstrap-4reactstrap

Position the search bar section in the center of the header using bootstrap 4

I am attempting to center a div with a search bar. I experimented by using position: absolute on the main div along with position: relative, but it did not yield the desired result. The search bar should be positioned below the text. I created this using B ...

htmlcsstwitter-bootstrapbootstrap-4

Trim the edges of a photo and add the Kinetic filter

Currently, I am utilizing Kinetic for image processing purposes. The issue arises when I crop an image and then attempt to convert it to black and white by clicking a button. Unfortunately, the straightforward setFilter function does not seem to work in th ...

htmlfilterkineticjscropputimagedata

Utilizing PHP & AJAX to dynamically update JSON files

In the process of creating a game that requires registration for use, I am attempting to add the username and password inputted into a form to my JSON file. The current structure of the JSON file is as follows: { "LogIns":[ { "Username":"mike ...

phphtmljsonajax

Creating a clickable table cell in CSS that maintains vertical alignment of text within

Is there a way to make an entire table cell clickable while still vertically aligning the text inside it? One possible solution is to set the link to display:block and adjust the line height. However, this method may not work if the text spans two lines a ...

htmlcssvertical-alignment

What is causing the Font Awesome icons to not display in this HTML code?

Utilizing Font Awesome in HTML is my goal, however, the code snippet provided is not rendering the desired outcome. I have stored the Font Awesome directory within my project folder as well... <?php include '../config/sessionhandling.php'; // ...

htmlcssbootstrap-4font-awesome

Navigating to and Revealing a Division by Clicking

Check out this code snippet: <a onclick="$('a[href=\'#tab-customtab\']').trigger('click');">Enquire Now</a> <div id="tab-customtab"></div> This piece of code triggers the opening of the #ta ...

javascriptjqueryhtml

Improving the Positioning of Bootstrap 4.0 Tooltip in Shiny Apps

I have successfully implemented tooltips in my Shiny app using pure HTML. However, I am facing an issue with the placement of the tooltip not hovering directly over the button as intended. Despite placing the button within a div element, the tooltip does n ...

javascriptrbootstrap-4shiny

What is the best way to display a variable (string/int) from a PHP file onto an HTML file?

I've searched online multiple times for a solution, but most of the results I found only show how to echo HTML code from a PHP file by changing the file extension to .php. However, my goal is to echo a variable from a PHP file and display it in an HTM ...

phphtml

Sending the image's identification number as a parameter to a function and showing the total number

On a static page, I have the following HTML markup: <div class="middle-content"> <div class="white-div"> <div class="like-buttons"> <img id="1" src="up.png" onclick="onClick(true, this.id)" /> &l ...

javascripthtml

What is the best method for disabling autoscroll for a specific div id when the :target attribute

I created this accordion menu using only html and css, but the buttons are built with the :target id. Is there a way to prevent the automatic scrolling when any button is clicked without using javascript? It currently moves to the anchor #id. I've se ...

javascriptjqueryhtmlcssaccordion

I am facing an issue where my CSS file is not connecting with my HTML

I added the link to my html pages, but my css is only showing up on the first page and not on any of the others. <head> <title>Angels Drawings</title> <link rel="stylesheet" href="style.css"> <STYLE> <!- ...

htmlcss