What causes Bootstrap to display two cards simultaneously when collapsed?

Here is the Bootstrap Collapse code I am using:

<section class="download bg-primary text-center">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-2">
          <a href="#breaker1" class="btn btn-dark btn2" role="button"> <span>1</span> </a>
        </div>
        <div class="col-12 col-md-2">
           <a href="#breaker2" class="btn btn-primary btn2" role="button"> <span>2</span> </a>
        </div>

In the first collapse, everything is working fine.

However, in the second collapse, the "hide" card feature is not functioning correctly.

Both of them are positioned within a row.

I am unable to hide a card in the second accordion like how it works in the first collapse.

Clicking on one of the cards in the first collapse causes another collapse to hide properly, but this behavior is not replicated in the second collapse.

How can I troubleshoot and fix this issue?

htmlcssbootstrap-4

Answer №1

To guarantee smooth operation, it is vital to ensure that every accordion possesses a unique identifier. Currently, both accordions share the same id="accordion"...

<div class="row">
        <div id="breaker1" class="byspace" style="width:99%;padding-left:15px;">
            <div id="unique-accordion-1">
                <div class="btn btn-dark btn2" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                    <div class="card-header" id="headingOne">
                        <h5 class="mb-0">
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="color:#d0cfcf"> Collapsible Group Item #1 </button>
                        </h5>
                    </div>
                    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#unique-accordion-1">
                        <div class="card-body"> ..................................... </div>
                    </div>
                </div>
                <div class="btn btn-dark btn2" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                   <div class="card-header" id="headingTwo">
                       <h5 class="mb-0">
                           <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" ar...</answer1></answer1>
<exanswer1><div class="answer accepted" i="64648715" l="4.0" c="1604321051" a="Q2Fyb2wgU2tlbGx5" ai="171456">
<p>For optimal performance, it's essential to ensure that each accordion has a distinct identifier. Currently, both accordions are using the same <code>id="accordion" attribute...


<div class="row">
            <div id="breaker1" class="byspace" style="width:99%;padding-left:15px;">
                <div id="unique-accordion-1">
                    <div class="btn btn-dark btn2" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                        <div class="card-header" id="headingOne">
                            <h5 class="mb-0">
                                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="color:#d0cfcf"> Collapsible Group Item #1 </button>
                            </h5>
                        </div>
                        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#unique-accordion-1">
                            <div class="card-body"> ..................................... </div>
                        </div>
                    </div>
                </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

Error encountered in jQueryUI Autocomplete: the function 'this.source' is not defined

I have been working on incorporating a live search feature that scans through keys in a JSON obtained from a public API. To achieve this, I am utilizing Jquery UI. However, I encountered the following error and I am uncertain about how to resolve it. Un ...

javascriptjqueryhtml

Tips for aligning field labels and items together on one line, even when the item is spread across multiple lines

I need to showcase a comprehensive list of countries: Countries: Angola, Botswana, Burundi, Comoros, DR Congo, Djibouti, Egypt, Eritrea, Ethiopia, Kenya, Lesotho, Libya, Madagascar, Malawi, Mauritius, Mozambique, Namibia, Rwanda, Seychelles, South Africa, ...

css

Saving HTML form field data through erb for persistent storage

Encountering an issue with erb while trying to populate the value of an HTML form field. The situation involves a scenario where the user has inputted an incorrect password and we want them to retain their name/email address information without having to r ...

htmlrubyformserb

Tips for embedding HTML/CSS snippets in backticks when using TypeScript with AngularJS

Does anyone else experience the issue of their Angular 2 templates showing up as gray text in Visual Studio Code? I'm unable to use autocomplete or see my CSS properly. Is this a settings problem or is there a plugin that can solve this? BTW, I am us ...

htmlcssangularjstypescriptbackticks

Unable to scroll to top using div scrollTop() function

Here's the fiddle I mentioned: http://jsfiddle.net/TLkmK/ <div class="test" style="height:100px;width:70px;overflow:auto"> Some text here that needs scrolling. </div> alert($('.test').scrollTop()); Feel free to scroll down ...

javascriptjqueryhtmlscroll

The image zoom function is malfunctioning when trying to adjust the image position

Having some trouble with a code for image zoom in/out. When I adjust the position of the image by applying margin left to either the image or the image container (#view), it affects the zoom functionality - causing the image to move to the left during zoom ...

javascriptjqueryhtmlcss

Guide to making the chosen image the primary display in an Angular bootstrap carousel

I've created a tutorial code featuring a list of cards with click events that pass the card index to set as the initial image in a carousel later on. The index is passed using a shared service among components. Initially, the index is successfully pa ...

javascriptangularbootstrap-4angular-ui-bootstrap

Is it possible to customize the appearance of a toast notification using Toastr beyond the default settings? If so, what options are available for creating

Working with Angular 9 and ngx-toastr has presented me with an interesting challenge. I am tasked with creating custom toast styles that differ significantly from the default ones provided by toastr. Each toast in the set will have unique border colors, f ...

cssangularuser-interfaceangular9toastr

Image floating next to a table

Trying to achieve something that I assumed would be straightforward, but CSS always has its surprises! The issue I'm facing is with an image floated to the left. Next to the image, I have a title, and below the title, but still alongside the image, I ...

htmlcsshtml-table

Experimenting with the routerLink directive in Angular 2

Currently, I am in the process of testing routing functionality. As part of this, I have moved my navbar to a separate component called MdNavbar, which primarily consists of HTML and CSS. The RouteConfig is located in another component where MdNavbar is in ...

htmltypescriptangularangular2-routingangular2-testing

Present a two-column layout using row formatting in Bootstrap with Angular

In my component file, I have an arrayData containing 4 datas, and I am trying to display them in two columns across two rows. <div class="row"> <div class="col-md-6" *ngFor="let cat of myArrayData; let index=index"> <div clas ...

jquerycssangularbootstrap-4

Using a locally hosted HTML page to update a JSON file stored on my computer

In my current project, I need to reorganize data stored in an array named unknown. Each item in this array needs to be moved either to a new array called good or another one called bad. let data = { "bad":[], "unknown": ["b", "a", "d", "g", "o", ...

javascriptpythonhtmlnpm

Creating a FreeMarker template in NetSuite for PDF generation that includes double sorting by date, accommodating possible empty values

My task involves organizing a list of records and displaying them in a table, with sorting based on the "From Date" column as the primary criteria, followed by the "To Date" column at a secondary level. I searched through the documentation for ?sort_by, bu ...

htmltemplatesnetsuitefreemarker

Was unable to maintain the default state of the button as clicked

When the website loads, I expected the navbar to have a certain design. However, I encountered an issue where I couldn't set the button's state as clicked. If you are curious about the output I achieved, you can watch it in video format here: H ...

javascripthtmlcssreactjsuser-interface

Issues encountered with certain Tailwind styles functioning improperly when deployed in a production environment with Next.js

It seems that there are some style issues occurring in the production build hosted on Netlify for a specific component. The problematic component is a wrapper located at ./layout/FormLayout.tsx. Below is the code for this wrapper: const FormLayout: React.F ...

javascriptcssreactjsnext.jstailwind-css

Switch out the innerHTML content and then revert back to the original while still preserving the events

Imagine you have a div called el with various components and events that are out of your control (like on mouse over and click). What if you wanted to insert a new widget inside this div? You might try something like this: var save = el.innerHTML; el.inn ...

javascriptjqueryhtmldominnerhtml

What sets apart element.class from element .class in CSS?

I've been puzzled trying to figure out why my CSS was not applying when I had mydiv .myclass { font-size: 24px !important; } But then I randomly decided to try mydiv.myclass { font-size: 24px !important; } and surprisingly it worked perfectly. Wh ...

htmlcss

Stop the Text Table from being highlighted

My webpage includes a dynamic table where users can select multiple rows. jQuery events and CSS are utilized to provide visual feedback when a row is selected. However, pressing the shift key sometimes causes text to become highlighted, which is not idea ...

javascriptjqueryhtml

Moving images displayed on a webpage

Is animating 5 pictures/photos a simple task? Take a look at this example: Which programming languages are recommended for achieving this effect? Thank you Tea ...

htmlcss

Toggle element visibility upon clicking

<table id="selectsupp"> <tr> <td> <select id="category"> <option value="display" readonly="true">-Shop By Category-</option> <option value="all">All</option> <option val ...

javascripthtmlcss