What could be causing all of my Bootstrap accordion panels to close at once instead of just the one I selected?

When implementing Bootstrap accordions in my projects, I encountered an issue where closing one accordion would cause the others to also close when reopened.

To address this problem, I utilized the collapse and show classes in Bootstrap to enable users to manually toggle each accordion. Initially, all accordions are open, and I envision them being manually turned on and off by the user. If a user manually closes or opens an accordion, I want that specific accordion to be the only one affected, without any interaction with the other accordions. In other words, toggling one accordion should not impact the state of the others.

<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');

       .new-listing-head h1 {
           color: #000;
           font-family: Inter;
           font-size: 40px;
           font-style: normal;
           font-weight: 600;
           line-height: normal;
       }
       
       /* Additional CSS styles here */
   
    </style>

    <div class="listing-accordion">
    
        <div class="accordion" id="accordionExample">
            <div class="accordion-item">
                <div class="accordion-header">
                  <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    <div style="display: block; margin-left: 16px;" class="listing-accord-head">
                        <span>General Settings</span>
                        <span>analysis of order trends in one year</span>
                    </div>
                    
                  </div>
                </div>
                <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    <!-- Listing Search -->
                    <div class="listing-search">
                    
                    <!-- Rest of the HTML content -->
                     
                    
                  </div>
                </div>
            </div>
    
            <!-- Images -->
            <div class="accordion-item images-analysis">
                <div class="accordion-header">
                  <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo">
                    <div style="display: block; margin-left: 16px;" class="listing-accord-head">
                        <span>Images</span>
                        <span>analysis of order trends in one year</span>
                    </div>
                  </div>
                </div>
                <div id="collapsetwo" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                    <div class="image-accordion-main">
                        <!-- Image content goes here -->
                     </div>
                     
                    
                  </div>
                </div>
            </div>
        </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bab7b7acabacaab9a898edf6ebf6ea">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
    <script src="//js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
    <script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
    <script>
        // Disable the toggling behavior of Bootstrap accordion
        document.querySelectorAll('.accordion-button').forEach(button => {
            button.addEventListener('click', function (e) {
                e.stopPropagation();
            });
        });
    </script>
javascripthtmlcssbootstrap-5accordion

Answer №1

To simplify the solution, just eliminate 

data-bs-parent="#accordionExample"
from all accordion items. This will make the accordion items independent of each other.

Check out the code snippet provided below for reference.

<!doctype html>
<html lang="en>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <h1>Hello, world!</h1>
  <div class="listing-accordion">

    <div class="accordion" id="accordionExample">
      <div class="accordion-item">
        <div class="accordion-header">
          <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <div style="display: block; margin-left: 16px;" class="listing-accord-head">
              <span>General Settings</span>
              <span>analysis of order trends in one year</span>
            </div>
          </div>
        </div>
        <div id="collapseOne" class="accordion-collapse collapse show">
          <div class="accordion-body">
            <!-- Listing Search -->
            <div class="listing-search">
              <div class="input-group acounts-adress-input">
                <div class="input-group-prepend">
                  <span class="input-group-text adress-input-icon">
                      hi
                    </span>
                </div>
                <input type="search" class="form-control" placeholder="Tell us about your product. Enter a keyword, UPC, or ISBN to search">
              </div>
              <button class="btn"> Search</button>
            </div>
            <!-- Title Listing -->
            <div class="title-listing">
              <label for="title">Tittle</label>
              <input type="text" class="form-control" placeholder="Bonnie">
            </div>
            <!-- Description Listing -->
            <div class="description-listing">
              <textarea class="form-control" id="exampleFormControlTextarea1" rows="4"></textarea>
            </div>
            <!-- Description Select -->
            <div class="listingdrop-select">
              <label for="foldersave">Save to folder</label>
              <div class="listingdrop-description-select">
                <select class="form-select" aria-label="Default select example">
                  <option selected>Save to Folder</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
                </select>
                <button class="btn"><i class="fab fa-hippo"></i>
                  </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Images -->
      <div class="accordion-item images-analysis">
        <div class="accordion-header">
          <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo">
            <div style="display: block; margin-left: 16px;" class="listing-accord-head">
              <span>Images</span>
              <span>analysis of order trends in one year</span>
            </div>
          </div>
        </div>
        <div id="collapsetwo" class="accordion-collapse collapse show">
          <div class="accordion-body">
            <div class="image-accordion-main">
              <div class="images-analysis-content">
                <img src="./image/image-a-one.png" alt="Listing Images">
                <div class="images-analysis-btn">
                  <button class="btn">
                      hi
                    </button>
                  <button class="btn">
                      hi
                    </button>
                </div>
              </div>
              <div class="images-analysis-content">
                <img src="./image/image-a-teo.png" alt="Listing Images">
                <div class="images-analysis-btn">
                  <button class="btn">
                      hi
                    </button>
                  <button class="btn">
                      hi
                    </button>
                </div>
              </div>
              <div class="images-analysis-content">
                <img src="./image/image-a-three.png" alt="Listing Images">
                <div class="images-analysis-btn">
                  <button class="btn">
                      hi
                    </button>
                  <button class="btn">
                      hi
                    </button>
                </div>

              </div>
              <div class="images-analysis-content">
                <img src="./image/image-a-four.png" alt="Listing Images">
                <div class="images-analysis-btn">
                  <button class="btn">
                      hi
                    </button>
                  <button class="btn">
                      hi
                    </button>
                </div>
              </div>
              <div class="images-analysis-content">
                <img src="./image/image-a-five.png" alt="Listing Images">
                <div class="images-analysis-btn">
                  <button class="btn">
                      hi
                    </button>
                  <button class="btn">
                      hi
                    </button>
                </div>
              </div>
              <!-- Add New Image -->
              <div class="newimage-analysis">
                <img src="./image/addnew-image.png" alt="">
                <div class="newimage-analysis-content">
                  <h5>Add New Image</h5>
                  <span>Max. File Size: 15 MB
                      (jpg, png, heic)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f9f848384829180b0c5dec3dec2">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>

</html>

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

Using JQuery to create animations with fadeIn and fadeOut effects is a great way to

As a complete newbie taking my first steps in front-end development, I spent most of my day trying to work out an animation function but couldn't quite get it right. Below are the snippets of HTML, CSS, and JavaScript codes: <!DOCTYPE html> < ...

javascriptjqueryhtmlcssanimation

What is the best way to delete an added element once a DIV has been toggled with JQuery?

I'm facing an issue where I need to add an element to a DIV that has a toggle function. However, every time I click the toggle again after adding the element, the same element is appended once more, resulting in duplicate elements. Upon observation, ...

javascriptjquery

Using Javascript and Node.js, a child class instance in ES5 can access a method belonging to its parent

I am facing an issue while trying to call a parent's method from child's constructor. Below is the code snippet: parentClass.js var ParentClass = function(arg) { this.arg = arg; this.result = {}; }; ParentClass.prototype = { constr ...

javascriptnode.js

Converting DateTime objects into JSON format for use in AJAX calls

When utilizing my AJAX method, it returns a view model that is serialized as a data structure using JavaScriptSerializer().Serialize(). Among this data are several nullable DateTime? properties. I recently discovered that these dates appear in JavaScript ...

javascriptc#asp.netajaxwebforms

Designing a drop-down menu that appears visually above its parent

As I design a menu positioned at the bottom using position:absolute; bottom:0, I want the submenu items to align perfectly above their parent. Each li should appear above the ul itself. The trick to achieving this is by applying a negative margin. However ...

htmlcssdrop-down-menunegative-number

Enable compatibility with high resolution screens and enable zoom functionality

My goal is to ensure my website appears consistent on all screen sizes by default, while still allowing users to zoom in and out freely. However, I've encountered challenges with using percentages or vh/vw units, as they don't scale elements prop ...

javascriptcssresponsive-design

The Jquery onclick function is executing multiple times, with each iteration increasing in

I have encountered an interesting problem that I can't seem to resolve. The issue involves dataTables and the data that is retrieved via jQuery ajax post after a selection change on a select element. Furthermore, I have an onclick function for multipl ...

javascriptjqueryajaxdatatablesonclick

Arrange an array by the occurrence rate of its elements within objects contained in another array, using Javascript

I found the explanation to be rather complex. Essentially, my goal is to iterate through each object in the 'objects' array, analyze the 'choice' values, tally the frequency of each letter, and then arrange the original arrays based on ...

javascriptarraysobject

Retrieving the object ID of an Open Graph from a page's URL

Is there a way to obtain the Facebook Object ID associated with a page directly from the page itself? For instance, if I requested the Object ID 325186347604922, this is what I received: <pre> { "url": ".../ricetta-bigne_salati.htm", "type": " ...

javascriptjsonfacebook-opengraph

Having trouble with accessing input field in a modal that was generated by TinyMCE React within a Next.JS environment

In my current project, I am utilizing Next.JS and looking to incorporate the TinyMCE editor onto my webpage. Here is the code snippet I have implemented: <TinyMceEditor selector='textarea' initialValue={ props.value } apiKey=<AP ...

javascriptreactjsnext.jstinymcejodit

Exploring the possibilities of integrating Keycloak with the powerful nuxt-auth

I am incorporating this particular authentication module in conjunction with Keycloak. In my nuxt.config.js configuration: keycloak: { _scheme: 'oauth2', client_id: 'client-bo', userinfo_endpoint: 'SERVER/protocol/open ...

javascriptvue.jsoauth-2.0nuxt.jskeycloak

Team members

Just started diving into Angular and practicing coding with it while following video tutorials. However, I've stumbled upon something in my code that has left me puzzled. I'm curious about the significance of the line "employees: Employee[]" in ...

javascriptarraystypescriptobjectecmascript-6

Angular 2 template format standard

Every Angular 2 example I encounter seems to place the template within the component decorator. import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>Hello world</h1>' }) e ...

javascriptangularangular2-template

Having difficulty with Mongoose in MongoDB when trying to retrieve an array of strings that match existing collections in the database

I've designed a helper function that is supposed to generate a promise containing an array of strings that represent all the names of Collections currently stored in my database. After conducting console logs, I confirmed that my connection to the da ...

javascriptnode.jsmongodbmongoosecallback

Organizing an Ordered List of Items into Alternating Columns Using HTML

I am in the process of developing a responsive HTML design to showcase an array of organized data. For smaller screens, the layout will consist of a single column displaying items sequentially. However, on larger screens, the design should adapt to featur ...

cssarrayshtml

Submitting a form with missing required information because the placeholder attribute is being used

I'm encountering an issue with my form where required fields can be submitted without any input. I want to use placeholder text, but it seems to be treated as a value, causing the form to submit successfully. I am utilizing the HTML5 'placeholde ...

htmlforms

Transferring information from a component to a service file in Angular 2

I am currently working on implementing a search functionality in my Angular app. In my app.component.html, I have the following code snippet: <input type="text" [(ngModel)]="keystroke"> {{keystroke}} <!-- prints out each keystroke --> In addi ...

javascriptangularjs

Issue with Moment.js amDateFormat consistently displaying date as 1970

Check out this link for more information I've integrated Moment.js and Angular-moment into my application. Oddly enough, all my epoch timestamps are being converted to the same date in 1970. <td class="timespan">{{tag.added_epoch | amDateForm ...

javascriptangularjstimestampmomentjsangular-moment

Refreshing a single HTML element in ASP.NET MVC - the simple way!

Recently, I put together an image gallery using the unite gallery jquery plugin and now I want to change up the images it displays. My plan is to have a button labeled "art" that, when clicked, triggers a function to update the directory path and load ne ...

javascriptc#jqueryrazor-pages

What could be the reason for Material UI xs={12} not extending to the full width of a mobile screen?

click here for image On my mobile screen, my components should be taking up the entire width but they seem to have an invisible margin on the right. <React.Fragment> <CssBaseline /> <ThemeProvider theme={theme}> <Grid ...

cssreactjsmaterial-ui