The Bootstrap 4 accordion won't stay closed and keeps popping open when I try to close

Having an issue with the example accordion from Bootstrap 4's documentation. After troubleshooting, I discovered that the 'show' class gets removed and added again when trying to close the card.

Links to images: https://i.sstatic.net/lxKiK.jpg
https://i.sstatic.net/mTSaI.jpg
https://i.sstatic.net/XzEOh.jpg
Attempted to use break on attribute modification in dev tools but couldn't pinpoint the source of the problem

Edit: Copied this code snippet from Bootstrap documentation

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
csstwitter-bootstrapbootstrap-4

Answer №1

The issue stemmed from the way I integrated the template I'm currently using. If you're utilizing metronic 7, be sure to load plugins.bundle.css after style.bundle.css

<!--begin::Global Stylesheets Bundle(used by all pages)-->
    <link href="{{ asset('assets/css/style.bundle.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />

    <!--end::Global Stylesheets Bundle-->

Do not do this 

<!--begin::Global Stylesheets Bundle(used by all pages)-->
<link href="{{ asset('assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/css/style.bundle.css') }}" rel="stylesheet" type="text/css" />
<!--end::Global Stylesheets Bundle-->

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 d3 to create an SVG with a Bootstrap dropdown feature

I am seeking to create a graph that is not a tree, as some nodes may have multiple parents. When a node on the graph is clicked, a dropdown menu should be displayed with a list of text options. Though I am new to d3.js, I have observed examples of bootstra ...

javascripthtmld3.jssvgbootstrap-4

Please insert a border shade on my navigation bar

I have been attempting to add a special effect to my menu. Specifically, I have been trying to include a 3px border at the top of each "li" element in my menu that only appears when hovered over. Unfortunately, my attempts using :after pseudo-selector hav ...

htmlcss

BS Modal was improperly invoked, leading to an illegal instantiation

Currently, I am attempting to trigger a bootstrap Modal in Angular by utilizing the component instead of its HTML attribute. However, I am encountering an error (specifically, illegal invocation). Here is the code snippet from the component: @ViewChild(&a ...

javascriptangulartypescripttwitter-bootstrap

Automatic Clicks in the Chrome Console

I've come across a website that requires me to click on multiple elements scattered throughout the page Here is the code for one of the elements: <span class="icon icon-arrow-2"></span> Is there a way to provide me with the console comm ...

javascriptjqueryhtmlcssgoogle-chrome

Neglect the styling of the element wrapper

Imagine I have two divs set up like so: <div name="parent" style="color:blue;padding:5px"> <div name="child" style="background:red"> Text that disregards the color:blue and padding:5px properties, yet still follows the background:red set ...

csshtmlparent

Ways to set the minimum width of a div depending on its contents

As I work on my website, I encountered an issue with a div containing a table. The div expands to full width, but when I resize the screen, it shrinks causing the content to overlap. I am looking for a solution where the minimum width of the div adjusts b ...

javascriptjqueryhtmlcss

Adjusting Bootstrap buttons to have a margin-left of -1px when clicked outside the designated area

I utilized Bootstrap in my project, implementing the following code: <div class="input-group"> <input type="text" class="form-control input-lg" autofocus> <span class="input-group-btn"> <button class="btn btn-primary btn-lg" t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

How to achieve striped columns with Bootstrap 4.0 instead of striped rows

Here is how my table currently looks with the implementation in place: https://i.sstatic.net/b7onC.png Since my data is displayed vertically, I am interested in adding stripes to the columns or implementing some CSS hovering effect when the mouse is over ...

csshtml-tablebootstrap-4

Adding design to distinct element after clicking a button

Struggling with a JS/Jquery issue on my portfolio website, I admit that I am still just an average programmer. My portfolio website has five buttons, each representing a different project. For each project, there is a corresponding text description and an ...

javascriptjqueryhtmlcss

How can I incorporate checkboxes and crosses for validation in AngularJS?

I've been searching through the documentation for angularjs and online resources, but I can't seem to find any information regarding a specific aspect of form validation. You know when you input something in a form field (like a name, phone numbe ...

cssangularjs

Passing Value in Bootstrap 4 Modal

I'm having trouble figuring out how to pass data to a modal. Here is an example of what I am trying to achieve: $('#exampleModal').on('shown.bs.modal', function () { var userID = $(this).data('userId'); $('# ...

jquerybootstrap-4

Is there a CSS3-compatible CSS parser available in C/C++?

Are there any C/C++ CSS parsers that currently support CSS3? I have come across a few, but none of them seem to offer full CSS3 compatibility. ...

c++cparsingcss

Why is it that the LESS compiler fails to recognize classes that are created by a zero iterator

When working with my CSS sheet, I found that I needed to reset some Bootstrap 3 preset values in order to achieve my desired style. To do this, I started using utility classes like .m-b-0 which sets margin-bottom:0px. However, I encountered an issue with ...

csstwitter-bootstrapless

I am looking to create a rounded circular progress bar with smooth edges

I'm looking to create a circular progress bar with rounded edges on the highlighted segment, similar to this example: https://i.sstatic.net/kNKyzm.png While I've managed to create a basic version, I'm struggling to achieve the rounded ends ...

javascripthtmlcss

Can you show me how to reposition the button alongside the sidebar?

Currently working on a college project centered around developing a personal website and I could use some assistance with aligning the Button to move along with the sidebar. When clicking on the hamburger menu, the sidebar shifts to the right, and then ba ...

javascripthtmlcss

Issues with the animation of letters bouncing in css3

I wanted to implement an animated effect in CSS, specifically the "jumping letters" effect. However, it seems that the current implementation is not working as intended. The entire word moves upward instead of each letter bouncing individually. Can you h ...

htmlcss

Troubleshooting PHPMailer error handling issue during ajax requests while successfully delivering emails

Encountering an issue with PHPMailer that seems to be puzzling me. A simple form has been set up with AJAX and PHP, where the input values are sent to PHP for validation. Once approved, PHP collects all relevant data (name, email, message, etc.) and creat ...

phpjqueryajaxtwitter-bootstrapemail

Changing the CSS properties of the Breadcrumb item using ngClass in Angular

I have been working on a Breadcrumb component in Angular that displays the full navigation path for routing purposes. This feature helps users navigate back to any previous step easily. I am using ActivatedRoute to get the current URL, which is functioning ...

angularbootstrap-4breadcrumbsng-class

Detecting Pixel Colors Across Multiple Overlapping Canvases

I have a challenge with multiple canvas elements on my webpage. I am trying to retrieve the pixel color of all overlapping canvas elements when they are stacked on top of each other. Let me illustrate with an example below. In this scenario, I am attempt ...

javascriptcsshtmlcanvas

Initiating a horizontal scroll menu at the center of the screen: Step-by

I need assistance setting up a horizontal scrolling menu for my project. The requirement is to position the middle button in the center of the .scrollmenu div. Currently, I am working with HTML and CSS, but open to suggestions involving javascript as well ...

javascripthtmlcss