Simultaneous opening of several bootstrap collapse panels with a single button press

I have been developing a blog-style web application with Django. My goal is to display all the posts on the home page, with each post containing a collapse panel.

Initially, I had hardcoded the IDs to trigger the collapse panels, causing all the panels to open when clicking on any post-collapse panel.

To address this issue, I decided to use the post ID as the HTML ID for triggering the collapse panel. However, I encountered a problem as the collapse panels were not functioning properly.

Here is the modified code snippet where I made the changes:

{% for post in posts %}
            <div class="container shadow mt-4 pl-3 pr-3 pb-3" style="border-radius: 10px;">
                <div class="user row p-3">
                    <img class="rounded-circle img-avatar" src="{{ post.author.profile.image.url }}" alt="">
                    <p class="author-name font-weight-bold font ml-4 mt-3">Username</p>
                </div>

                <div class="question">
                    <p>{{ post.question }}</p>
                </div>

                <button class="mb-2" style="border: none;  background-color: transparent" type="button"
                        data-toggle="collapse"
                        data-target={{ "#"|join:post.id }}
                                aria-expanded="false" aria-controls={{ post.id|slugify }}>
                    <i class="fas fa-angle-down pl-1 pr-1"></i>
                </button>


                <div class="collapse" style="overflow: hidden" id={{ post.id|slugify }}>
                    <div class="card card-body options">
                        <li class="options"><input type="radio" name="options"><span
                                class="pl-2 pr-3">{{ post.option1 }}</span></li>
                        <li class="options"><input type="radio" name="options"><span
                                class="pl-2 pr-3">{{ post.option2 }}</span></li>
                        <li class="options"><input type="radio" name="options"><span
                                class="pl-2 pr-3">{{ post.option3 }}</span></li>
                        <li class="options"><input type="radio" name="options"><span
                                class="pl-2 pr-3">{{ post.option4 }}</span></li>
                        {% if post.option5 %}
                            <li class="options"><input type="radio" name="options"><span
                                    class="pl-2 pr-3">{{ post.option5 }}</span></li>
                        {% endif %}
                    </div>
                    <button type="submit" class="btn btn-primary float-right mt-3">Submit</button>
                </div>
            </div>
        {% endfor %}

The above code was inspired by the Bootstrap 4 components.

Answer №1

data-target="#{{ post.id }}" This will solve the issue.

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

Verify Radio Buttons in AngularJS

I thought validating a selection from a radio group would be simple, but I'm struggling to find the right solution. In my form, I need to ensure that at least one option is selected from the radio buttons. Using the 'required' attribute on e ...

What is the best way to toggle the visibility of a div when a button is clicked?

I have a container with a registration wizard, and I want to toggle the visibility of this container when a button is clicked. How can I achieve this? Check out the code snippet below. Thank you :) <div id="wizard" class="swMain"> <ul> ...

Ways to substitute numerous instances of a string in javascript

I have experience in developing websites using reactjs. I usually implement restAPI's with java and work with liferay CMS. In one of my projects, I created a shortcode for accordion functionality like this: ('[accordion][acc-header]Heading 1[/ac ...

Animate the transition of the previous element moving downward while simultaneously introducing a new element at the top

I currently have a hidden element called "new element" that is controlled by v-if. My goal is to create a button labeled "display" that, upon clicking, will reveal the new element on top after sliding down an old element. How can I achieve this using CSS ...

Is there a way for rainyday.js to utilize a CSS background image as its background?

I have a simple website with a fixed, full-sized background set using CSS. I am trying to incorporate rainyday.js to create a rain effect over the entire site, including the text. Currently, I am only able to get rainyday.js to display rain over a small s ...

What is the best method for style.scss to communicate with style.css - should it be through @import, --watch,

As I observe the use of @import with mixins and partials in the code, I find myself puzzled as to why the programmers did not simply write @import style.css. Instead, they imported Susy, bourbon, vendors, utilities, and bases. It's a bit confusing to ...

CSS: The element's relative size causes the background image to vanish

I am facing an issue with displaying a background-image that is 800x480 pixels. The background image appears when the element has a fixed size, but not when the element has a relative size or a max-width. Functional CSS code: .audio-container, .settings- ...

Modifying the information within a static HTML file in Django

After saving an HTML file as a static file to store it in cache and display it through a service worker when offline, I realized I needed to make a small modification to ensure the correct encoding. My server is pythonanywhere and the paths defined in my s ...

Transforming dynamic class based on state value from React to TypeScript

I'm trying to implement this React function in TypeScript, but I'm encountering errors. const ListItem = ({ text }) => { let [showMore, setShowMore] = useState(false); return ( <div className="item"> ...

Angular unable to find a route for external links

I am attempting to create an external link with an <a href="google.com"></a>, but for some reason it redirects me to localhost:4200/google.com... I'm not sure why this is happening, but I need to eliminate the localhost:4200. Below is the ...

Retrieve Object Key in Angular 7

I have a specific item: this.item = { name:"Michael", age:18 }; I am looking to display it in an HTML format. name: Michael age: 18 <div >{{ item (name) }}</div> --??? should put name <div>{{ item.name }}</div> < ...

Increase the spacing between elements in a row using Bootstrap's margin utility

I am working with Bootstrap and have a row class containing three different elements. I want to create a margin of 20px between each element in the row container while keeping them all on the same line. Currently, when I add a margin class with a parameter ...

Floating elements overlapping fixed elements

I am currently in the process of developing a mobile application and encountering an issue with relative divs overlapping the top and bottom headers fixed with a z-index. Despite my attempt to resolve this by adding a z-index to the relative div, the probl ...

Why are my cursor and my drawing line on opposite sides?

I've been working on a JavaScript drawing app, but I'm facing an issue where the drawn elements are not aligned with my cursor. The positioning seems off, especially when moving to the right or up on the canvas. As I move towards the furthest lef ...

Using a single jQuery script, implement multiple modals on a webpage that are responsive on both desktop and mobile devices

My Modal is functioning well on desktop, but I'm facing an issue on mobile where the screen doesn't close when clicking outside the modal area. Is there a way to solve this for mobile without adding the 'X' button to close it? I attem ...

Create an animated underline for two CSS tabs

I'm interested in learning how to create a similar animation using JS, jQuery, or Vue Transitions with Bootstrap. I want to achieve the effect of moving the line under TAB1 to the right when TAB2 is clicked. Can anyone guide me on animating the div sm ...

Embed a photo into a pop-up window

Is there a way to dynamically insert an image into a Modal by utilizing the value of the variable data-image? This variable will change based on the selected image. <script type="text/javascript"> $('#myModal').on('show.bs.m ...

Is there anyone who can help me troubleshoot my code problem involving bootstrap specifically on Safari?

Encountering an issue with Bootstrap 4 and Safari on Mac. The problem arises when using cols within a row, causing my form to load incorrectly on Safari. Any assistance in fixing this issue would be greatly appreciated. In Chrome, the layout displays corre ...

Having trouble getting CSS media query to work in my Rails mailer template

Is it true that media queries do not work in email templates? I have a simple test template and a query BUT can't seem to get it to function properly. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT ...

Creating additional columns in a database table with PHP and SQL

        I'm currently working on a feature that enables me to add a new column to a database table using SQL and PHP. My setup includes a front-end form where users can choose the table they want to modify and input boxes for specifying the new c ...