Clicking on the accordion will cause all cards to expand simultaneously

{% for inv in invoices__ %}
    <div class="row">
            <div class="col-md-12">
                    <div class="accordion" id="accordionExample">
                            <div class="card">
                                     <div class="card-header" id="{{inv.headingId}}">
                                            <div class="row headerContiner">
                                                <div class="col-md-10">
                                                   <h5 data-toggle="collapse" data-target="{{inv.collapseTarget}}">{{inv.ttl}}</h5> 
                                                </div>
                                                <div class="col-md-2">  
                                                    <a href="{% url 'invoice_update' inv.id__ %}" class="btn text-secondary px-0">
                                                    <i class="fa fa-edit fa-lg"></i></a>      
                                                    <a href="{% url 'invoice_delete' inv.id__ %}" class="btn text-secondary px-0">
                                                    <i class="far fa-trash-alt fa-lg text-danger float-right"></i></a>     
                                                    <a href="{% url 'invoice_details' inv.id__ %}" class="btn text-secondary px-0">
                                                    <i class="fas fa-file-invoice"></i></a> 
                                                    <a href="{% url 'invoice_status' inv.id__ %}" class="btn text-secondary px-0">
                                                    <i class="fas fa-tasks"></i></a>
                                                </div>
                                            </div>                                                                               
                                       </div>
                                       <div id="{{inv.collapseId}}" class="collapse" aria-labelledby="{{inv.headingId}}" data-parent="#accordionExample">
                                            <div class="card-body">
                                                        <div class="row">     
                                                            {% for stg in inv.stages %} 
                                                                <div class="col-md-3 stags">                                                                  
                                                                        <h6 class="stepHeading">Step {{stg.counter__}}: {{stg.title}}</h6>
                                    
                                                                        <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                                                                        {% if stg.isCreated %}
                                                            
                                                                        <a href="{% url stg.editLink inv.id__ %}" class="btn text-secondary px-0">
                                                                            <i class="fa fa-edit fa-lg"></i>
                                                                            </a> 

                                                                        <a href="{% url stg.deleteLink inv.id__ %}" class="btn text-secondary px-0">
                                                                            <i class="far fa-trash-alt fa-lg text-danger float-right"></i>
                                                                        </a> 

                                                                        <a href="{% url stg.previewLink inv.id__ %}" class="btn text-secondary px-0">
                                                                                <i class="fas fa-file-invoice"></i>
                                                                        </a> 

                                                                        {% else %}

                                                                        <a href="{% url stg.addLink %}" class="btn text-secondary px-0">
                                                                            <i class="fas fa-plus"></i></a>
                                                                        </a>
                                                                        {%endif%}
                                                                        
                                                                </div>
                                                               
                                                                
                                                         {% endfor %}
                                                        
                                                         </div>
                                                        
                                                </div>
                                                
                                         </div>
                                        
                            </div>
                            
                     </div>
             </div>
     </div>
{% endfor %}

I am attempting to create an accordion where only the currently clicked card is displayed, collapsing others. However, when I click on one card, they all expand at once.

The code functions flawlessly aside from this issue with clicking. Any assistance would be greatly appreciated, thank you in advance.

I am generating classes and IDs dynamically from a Django view and passing them as part of the context to the template.

No jQuery or JavaScript events have been added to it.

htmlcssdjangobootstrap-4

Answer №1

check this out

<div class="row">
    <div class="col-md-12">
        <div class="accordion" id="accordionExample">
            {% for inv in invoices__ %}
            <div class="card">
                <div class="card-header" id="{{inv.headingId}}">
                    <div class="row headerContiner">
                        <div class="col-md-10">
                            <h5 data-toggle="collapse" data-target="{{inv.collapseTarget}}">{{inv.ttl}}</h5> 
                        </div>
                        <div class="col-md-2">  
                            <a href="{% url 'invoice_update' inv.id__ %}" class="btn text-secondary px-0">
                                <i class="fa fa-edit fa-lg"></i>
                            </a>      
                            <a href="{% url 'invoice_delete' inv.id__ %}" class="btn text-secondary px-0">
                                <i class="far fa-trash-alt fa-lg text-danger float-right"></i>
                            </a>     
                            <a href="{% url 'invoice_details' inv.id__ %}" class="btn text-secondary px-0">
                                <i class="fas fa-file-invoice"></i>
                            </a> 
                            <a href="{% url 'invoice_status' inv.id__ %}" class="btn text-secondary px-0">
                                <i class="fas fa-tasks"></i>
                            </a>
                        </div>
                    </div>                                                                               
                </div>
                <div id="{{inv.collapseId}}" class="collapse" aria-labelledby="{{inv.headingId}}" data-parent="#accordionExample">
                    <div class="card-body">
                        <div class="row">     
                            {% for stg in inv.stages %} 
                            <div class="col-md-3 stags">                                                                  
                                <h6 class="stepHeading">Step {{stg.counter__}}: {{stg.title}}</h6>

                                <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
                                {% if stg.isCreated %}

                                <a href="{% url stg.editLink inv.id__ %}" class="btn text-secondary px-0">
                                    <i class="fa fa-edit fa-lg"></i>
                                </a> 

                                <a href="{% url stg.deleteLink inv.id__ %}" class="btn text-secondary px-0">
                                    <i class="far fa-trash-alt fa-lg text-danger float-right"></i>
                                </a> 

                                <a href="{% url stg.previewLink inv.id__ %}" class="btn text-secondary px-0">
                                    <i class="fas fa-file-invoice"></i>
                                </a>

                                {% else %}

                                <a href="{% url stg.addLink %}" class="btn text-secondary px-0">
                                    <i class="fas fa-plus"></i>
                                </a>

                            {%endif%}
                            
                            </div>


                        {% endfor %}

                    </div>

                </div>

            </div>

            
        </div>
    </div>

I have moved the first three divs from inside the loop to outside. This way, the accordion class (and its ID) only appears once, not in each loop.

Best of luck!

For a live example using Bootstrap, please visit this link.

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

Ensuring that the footer remains fixed at the bottom of the page through CSS styling

Is there a way to ensure that the footer stays at the bottom of the page even when there is not enough content? I've experimented with various CSS options to no avail. While I could use JavaScript to achieve this, I believe CSS would be a smoother so ...

htmlcss

Troubleshooting Django's CONN_MAX_AGE issues in relation to PostgreSQL's max_connections limit

Running Django servers with CONN_MAX_AGE: 300 is causing request failures due to PostgreSQL exceeding the default max_connections limit of 100. What is the most effective solution to this issue? Attempting to use pgpool2 did not alleviate the problem; in ...

pythondjangopostgresqlconnection-poolingpgpool

The URL consistently directs users to the login page when a POST request is made

Every time I attempt to send a POST request, the URL automatically redirects to the login page showing a BAD_REQUEST This is the code for the login feature: class LoginView(View): def get(self, *args, **kwargs): form = LoginForm() context = { ...

djangodjango-rest-frameworkdjango-views

A comprehensive guide on efficiently handling JSON data in Django

I have encountered an issue while testing views in my Django application. The view I am working on accepts a POST request with JSON data. Even though I successfully tested it using Postman, when I tried to implement it in tests.py, I received an error stat ...

pythonjsondjango

Choose an input that is not grouped with the rest

I am facing an issue where I need to group these three inputs together as one continuous form. However, there seems to be a problem with the select input not aligning correctly with the rest of the form. Is there something that I might be doing wrong? & ...

htmlcsstwitter-bootstrap

Designing a custom style for a select box using CSS and HTML

Recently, someone assisted me in removing the outline of my select box in my debut bootstrap-django project. Now, I am seeking your guidance on altering the border color property of the options box itself from blue to yellow. Strangely, when the select box ...

javascripthtmlcssdjangobootstrap-4

Shifting slightly to the left, text in Bootstrap 4 adjusts when an image is positioned to the right

Trying to achieve perfect alignment, but encountering an issue where adding an image to the last element in the row causes it to shift to the left. See examples below: Image added to the last element in the row Image not added to the last element in the ...

htmlcsstwitter-bootstrapreactjsbootstrap-4

I'm having trouble understanding why I'm getting an error when trying to link CSS or SCSS

<link rel="stylesheet" type="text/css" href="scss/styles.scss"> <link rel="stylesheet" type="text/css" href="css/styles.css"> /*webpackconfig.js*/ var path = require("pat ...

javascripthtmlcssnode.jswebpack

Changing the hue of your Vimeo video player?

So far, in my exploration, I have discovered that giving the iframe a background color can affect the timeline number color. However, besides that, I am unable to find a way to modify the player's control colors aside from adjusting the Vimeo embed co ...

javascriptjquerycssvimeo

Add an HTML block following a designated HTML comment

Is it possible to inject HTML code after a specific HTML comment rather than inside an HTML element like <div>? For instance, I'm interested in adding the opening tags <div id="OUTER"><div id="INNER"> following the first comment tag ...

jqueryhtmltextinsert

How come my justify-content property isn't functioning properly with Flexbox?

I've been racking my brain trying to solve this. The goal is to have all the boxes neatly grouped together, but for some reason there's a massive gap between the main content and footer. Could someone lend a hand? CSS Below is the CSS code rele ...

htmlcssflexbox

The Django ImportError appears to be caught in a never-ending cycle

Within my Django project setup, I have the following components: apps1/models.py: Post (model) apps2/models.py: Blogs (model) apps2/functions.py: get_blogs (method) The apps1/models.py file includes an import statement for the Blogs model from apps2/ ...

pythondjango

I wish to have the option to choose a courseId when creating a new hole by clicking the "create new hole

I'm currently developing a golf score tracking application. I have set up a database with tables for Rounds, Courses, and Holes. The Hole table contains a foreign key that links to the CourseId, allowing me to associate each hole with a specific cour ...

c#htmlasp.net-mvcentity-framework

Every time I upload a file to a div, the div unexpectedly moves downwards

My webpage layout includes the following code: <body> <div class="pollid" > <select class="pollid" id="pollid" size="[2]" > [options] </select></div> <div class="seperator"></div> <div class="options"> < ...

javascriptjqueryhtmlcss

Using Python and Selenium to Scroll Down the Page (with Two Separate Scrollbars)

I need help scrolling down the conversation section on Facebook Messenger. There are 2 scroll bars on the page, and I specifically want to scroll down scroll bar number 1 (see image) Click this link to access the page (make sure you are logged in and hav ...

pythonhtmlseleniumwebdriver

Positioning bootstrap.min.css in the upper right-hand corner

My website is experiencing an issue where bootstrap.min.css is causing an X to appear in the top right corner (webpage). When I comment out <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"> in my HTML file, the X disappears but ...

htmlcss

What is the process for specifying the content type as application/json in an Ajax request?

Do you have a smart contract named GovtContract that functions properly when utilizing curl commands? $curl -X POST -H "Content-Type: application/json" localhost:3000/govtcontract/set -d '{"value":"5"}' | jq $curl -X GET -H ...

jqueryhtmljsonnode.jsajax

Is it feasible to make Twitter's Typeahead plugin have an initial slide down or fade in effect?

Does anyone have an easy way to make the dropdown from Twitter's typeahead jQuery plugin initially slide down or fade in? I'm trying to animate the size of the dropdown menu when it adjusts, but even a simple fade or slide in would be fine. I pre ...

jquerycsstwitter-bootstraptwittertypeahead.js

Incorporating the Vue JavaScript framework into Django for an enhanced user interface

Having experience as a Laravel developer using Vue as the frontend framework, I recently became interested in diving into Python, specifically exploring its web framework counterpart - Django. In comparison to Laravel, Django seems superior in every aspect ...

djangovue.js

Looking to replace a background image using javascript?

(apologies for any language mistakes) I have multiple divs with a common background image. I assigned them the same class and set the background image using CSS in style.css which worked perfectly fine. Now, I want to change the background image dynamical ...

javascriptcssbackground-image