Is there a way to prevent one accordion pattern from automatically closing when another one is opened?

I'm currently working on a code that involves accordion patterns, and I've encountered an issue where opening and closing one accordion automatically closes another. I want all accordions to remain open until the user explicitly clicks to close them. Specifically, when I close and reopen the "Buy Type" accordion, the "Specs" accordion also closes, which is not the behavior I desire. I've included the entire section below in case there is an error causing this issue. Additionally, reopening the "Design Guidelines" accordion closes the "Template Instructions," creating further complications.

<section id="specification" class="mt-5 pt-4">
    <div class="container-fluid container-fluid-shorter">
        <!--Accordion wrapper-->
        <div class="accordion md-accordion accordion-1" id="accordionEx23" role="tablist">

            <!-- Accordion content with multiple sections -->

        </div>
    </div>
    <!--Accordion wrapper-->
</section>

It seems like there might be an issue in the way the accordion elements are interacting. Let's take a closer look at it.

htmlcssbootstrap-4

Answer №1

Take out the accordion class. If you prefer to have all sections open initially, use collapse show.

    <div class="md-accordion accordion-1" id="accordionEx23" role="tablist">
         <div class="card my-4">
                <div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading96">
                    <h4 class="text-capitalize mb-0 py-1">
                        <a class="text-black font-weight-light" data-toggle="collapse" href="#collapse96" aria-expanded="true" aria-controls="collapse96"> buy type </a>
                    </h4>
                </div>
                <div id="collapse96" class="collapse show" role="tabpanel" aria-labelledby="heading96" data-parent="#accordionEx23">
                    <div class="card-body">
                        ...
                    </div>
                </div>
         </div>
         ..(more collapsing cards...)
   </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

Tips for eliminating unnecessary space in a text area

I have a textarea and a button. I wanted them to be placed in the same horizontal line from the bottom. However, when I place them inline with no style applied, there is extra margin at the bottom of the textarea that is causing them not to align properly: ...

htmlcss

What is the process for right-aligning components in BootStrap 5.0?

Currently, I am enrolled in an online course where the instructor utilizes Bootstrap 4. However, I decided to challenge myself by using Bootstrap 5.1 instead. I have been struggling with configuring my navigation bar elements to look like the ordered list ...

htmlcsstwitter-bootstrap

What is the best method for generating a comprehensive list of xpaths for a website utilizing Python?

Method I Attempting to generate a hierarchical tree of all the xpaths within a website () using Python, I initially aimed to acquire the xpath for the branch: /html/body with the following code: from selenium import webdriver url = 'https://startpag ...

pythonhtmlseleniumxpathtree

Tips for speeding up your website by preloading versioned files in HTML

Tools like Google Lighthouse and PageSpeed recommend preloading important requests using <link rel=preload> to enhance website performance. When it comes to static files with unchanging filenames, the process is straightforward. However, how can I ...

htmlangularprimengpagespeedlighthouse

Is it possible to dynamically change the color of a box shadow using an event handler?

I'm currently in the process of developing an application that consists of six distinct topics organized within a flexbox structure, complete with a box-shadow effect. My objective is to dynamically alter the color of the box-shadow through an event ...

javascriptjqueryhtmlcss

Integrate Bootstrap 4 with your Angular 6 or Angular 7 application

Currently working on an Angular project that utilizes Bootstrap 4. Seeking assistance with incorporating SCSS into my Angular application. The question at hand is: Are the steps for adding Bootstrap 4 SCSS in Angular 6 and Angular 7 identical? For exa ...

angularnpmbootstrap-4angular-cliangular7

"Utilize PrimeNG's p-tabpanel to bind a unique style class to

When using the tabview component from PrimeNG, I am encountering an issue where I am unable to bind a header style class. Here is my static HTML code that works: <p-tabPanel header="Title" headerStyleClass="badge" formGroupName=&quo ...

htmlcssangularprimeng

Changing the background color of a PHP input based on the webpage being viewed - here's how!

I'm in the process of creating a website where each page will have its own unique background color. Additionally, I am using a PHP input for both the header and footer sections, which need to change their background colors based on the specific webpa ...

javascriptphphtmlcssbackground-color

Creating an interactive HTML form that updates in real-time based on user input can be achieved using vanilla JavaScript. This allows for a

I am working on a form that dynamically generates more form fields based on a user input value. <form> <input type="Number" name="delivery"> </form> For example, if the user enters '3', it should automat ...

javascripthtmlnode.jsformsinput

The Popover style from React-Bootstrap seems to be missing when applied to my component

Attempting to incorporate a Popover with overlay trigger from React - Bootstrap has proven to be quite the challenge. If you check this image, you'll see what it's supposed to look like. This is the code I used: var {Button, Overlay, OverlayTr ...

csstwitter-bootstrapreact-bootstrapbootstrap-popover

Implementing a login system on my website using HTML - a step-by-step guide

https://i.sstatic.net/9hOx6.png ...

javascriptphphtmlcssauthentication

Proportional fluid image grid with responsive design

After implementing various media queries, I've managed to create an image grid using Bootstrap 4+ that looks great on specific devices and layouts. Here's the reference code: .cmd-three-img-container { position: relative; margi ...

javascripthtmlcssflexboxbootstrap-4

Issues with IE6 hover state not properly resetting

Tutorial This particular issue has been isolated in the test case provided above. It is easily noticeable when viewed in IE6. Description of the Issue In Internet Explorer 6, when hovering over the link, all child elements that are supposed to be visibl ...

cssinternet-explorer-6

Ways to properly align a navigation bar at the center of the webpage while maintaining the

Whenever I zoom in or out on my page, the homepage button loses its color and fails to expand to the right side. So, I have two main goals: 1) To center the selected area (highlighted by a red border in the image). 2) To extend the green color of the hom ...

htmlcss

What could be the reason for the onClick event functioning only once in HTML?

Below is the code snippet containing both HTML and JavaScript. However, the issue I am facing is that the onclick event only seems to work for the first <li>. <!DOCTYPE html> <html> <body> <ul class="list"> <li ...

javascriptjqueryhtml

When a website is deployed to an application, the process includes MVC bundling and managing relative CSS image paths

When trying to convert relative image paths to absolute paths, there are numerous queries on stackoverflow addressing this issue. For example, take a look at this thread: MVC4 StyleBundle not resolving images This question recommends using new CssRewrite ...

cssasp.netasp.net-mvc-4bundlebundling-and-minification

Having an issue with HTML and JavaScript where the button won't open when pressed. Any help is appreciated

https://jsbin.com/haluhifuqe/edit?html,js,output I'm facing an issue with my HTML & JavaScript code - when I click the button, it doesn't open. Can anyone help me out? <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

javascripthtmlcss

showcasing a map on an HTML webpage

Seeking advice on integrating a map feature in HTML to mark store locations. Working on an app for a business community and need help with this specific functionality. Your assistance would be greatly appreciated! ...

javascripthtml

An issue arises in Django where a particular field fails to display the accurate value when presented in a template

models.py The Order model in models.py defines various fields such as user, customer, card_id, mobile, email, total_price, payment_method, status, take_method, points_earned, date, and address. It also includes preset choices for payment options, order sta ...

pythonhtmldjango

Is it possible to dynamically load records in real time with the help of PHP and jQuery?

I developed a custom system using PHP that allows users to post status messages, similar to a microblog. The system utilizes a database table structured like this: posts_mst ------------------ post_id_pk post_title post_content date_added Initially, I su ...

phpjavascriptjqueryhtmlajax