How can I stop the accordion from toggling in Bootstrap V5 when clicking on an element in the header?

In the latest version of Bootstrap, v5, it seems that using e.stopPropagation(); no longer prevents the accordion from toggling when an element in the header is clicked.

Do you have a solution for this problem?

How to prevent accordion from toggling when button in header is clicked?

If you are interested, here is an example showcasing the issue:

https://jsfiddle.net/8qdbjfx2/4/

Any insights on how to address this challenge would be greatly appreciated!

Thank you in advance for your assistance.

javascripttwitter-bootstrapbootstrap-5

Answer №1

If you're still looking for a solution to your problem, I came across this helpful solution.

Following that, I put together a more straightforward example:

<div class="accordion accordion-flush" id="content_accordion">
    <div class="accordion-item">
        <h2 class="accordion-header" id="flush-heading-1">
            <div class="d-flex align-items-center position-relative">
                <button
                    type="button"
                    class="accordion-button collapsed"
                    data-bs-toggle="collapse"
                    data-bs-target="#item_1"
                    aria-expanded="true"
                    aria-controls="#item_1"
                >
                    Title 1
                </button>
                <div class="header-slot"&rt;
                    <i class="bi bi-pencil-fill" onclick="hello()"></i>
                </div>
            </div>
        </h2>
        <div id="item_1" class="accordion-collapse collapse" aria-labelledby="flush-heading-1" data-bs-parent="#content_accordion">
            <div class="accordion-body content_text">Content 1</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

Choose a country from a modal in a React application

click here for image description I need help implementing the screenshot above. My goal is to change the default country name and flag when a user clicks on the country dropdown menu. I have been using headless UI so far, but I'm struggling to figure ...

javascriptreactjsnext.jsheadless-ui

Testing URL Parameters in JEST with an API

Seeking integration tests using Jest for an API endpoint. Here's the specific endpoint: http://localhost/universities/ucla/class/2013/studentalis/johndoe. When tested with a put request, it returns 201 on Postman. However, the testing encountered a t ...

javascriptexpressjestjssupertest

Clicking on the ActionButton will trigger the sending of an HTTP Request in this Firefox

Seeking guidance: As I develop an addon, my objective is to initiate a HTTP request upon clicking the ActionButton. The data to be sent to the server includes the URL of the tab and the content of the page. Initially, I attempted to create a log message a ...

javascriptajaxfirefoxfirefox-addonfirefox-addon-sdk

Encountering a tIDENTIFIER syntax error while trying to include a button_tag in Rails

Currently, I am in the process of developing a rails application and my aim is to incorporate a button that executes a javascript onclick function. The code snippet I am using for this purpose is: <%= button_tag "Action" type: "button", onclick: "test( ...

javascripthtmlruby-on-railsrubysyntax

Unable to access elements located underneath the div

I'm working on creating a simple menu using CSS and jQuery. Everything seems to be functioning correctly, but I've noticed that when I open the menu, I am unable to click on any elements below it. Check out the menu here <header> <nav ...

javascriptjqueryhtmlcss

Using GULP and NODE, what is the best way to retrieve the Jenkins BUILD_NUMBER in JavaScript?

I am having an issue with my gulp task named getBuildNumber. This task utilizes the Child Process module to run a script. gulp.task('getBuildNumber', function() { var buildNumber = child_process.execSync("echo $BUILD_NUMBER").toString(). ...

javascriptnode.jsangularjenkinsgulp

After the page loads, the Bootstrap 5 Carousel does not autoplay by default

Here is a typical Bootstrap 5 carousel code snippet... <div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item ac ...

dombootstrap-5carouselpageloadautoplay

The JQUERY Uncaught Error: Syntax error message popped up when trying to access an unrecognized expression on the javascript: void(0)

I've encountered an issue after upgrading to jQuery 3.4.1 while using bootstrap 3. The console keeps showing this error: Uncaught Error: Syntax error, unrecognized expression: # Here is the section of code causing the error: <div class="btn-grou ...

javascripthtmljquerytwitter-bootstrap-3

Leveraging JSON Data in Highcharts

I am looking to create a column range chart using Highcharts to display a series of high and low temperatures. I found a demo example that showcases the kind of chart I want on the Highcharts website at: http://www.highcharts.com/stock/demo/columnrange Th ...

javascriptjqueryjsonhighcharts

ASP.NET Core - Populating views with data gradually

I'm currently working on a .Net Core application and I have reached a point in my code where I need to dynamically add data based on user interactions. Initially, I have a table displaying elements, and when a user clicks on any element, I need to ret ...

javascriptjqueryasp.netasp.net-mvc

Sauce Labs encountering issues when running JavaScript code

Currently, I am using Selenium WebdriverJs along with Mocha to conduct tests on Sauce Labs via Travis CI. After isolating the issue without any project dependencies, I am seeking help. The interesting observation is that defining an additional object with ...

javascriptseleniumselenium-webdriverwebdriversaucelabs

Obtaining solely the words found within HTML documents

In my Python 2.7 project, I have a folder containing multiple HTML pages that I need to extract only words from. My current process involves opening the HTML file, using the Beautiful Soup library to extract text, and then writing it to a new file. However ...

javascriptpythonhtmlcsspython-2.7

Take me to a different page through colorbox

Currently, I am facing an issue with my colorbox. My objective is to redirect to another page once a certain value has been validated using PHP. Below is the code snippet that I have attempted: if (isset($_POST['confirm'])) { echo "<scrip ...

javascriptphpjquery

Ember Component Incorporating Keyboard Input

I recently developed an ember component that features a rectangular block in a green canvas. Everything is working smoothly so far. However, I am facing some challenges with implementing keyboard input commands (A S D W) to navigate the rectangle within t ...

javascriptjqueryember.jscomponents

Passing a ref from a parent component to a child component in reactjs

I have the following situation, how can I make sure that the attachment field in the child component is accessible from the parent component? class ServiceDeskCustomerCreate extends Component { constructor(props, context) { super(props, context); ...

javascriptreactjs

fa icons moving the elements aside

I'm attempting to design a navigation menu with tabs, but I'm facing an issue where the tabs containing "fa icons" are consuming too much space, causing other elements to be shifted to the right or below (if there were more lines). How can I pre ...

javascripthtmlcssfont-awesomebootstrap-4

Dynamic Interval Update - Using jQuery or Vanilla JavaScript

In my code, I currently have two "stopwatches" (and possibly more in the future). The existing code works well, but I am looking for a way to avoid repeating it multiple times. I believe creating a function would be an ideal solution to reduce redundancy. ...

javascriptjquery

Issue with Bootstrap's vertical alignment property not functioning as expected

This question arises from the Bootstrap documentation and highlights an issue with vertical alignment. While everything else seems to be working fine, the vertical alignment is not displaying correctly. Take a look at the comparison below: Expected Align ...

twitter-bootstrapbootstrap-4vertical-alignment

if a user does not click on an element in jQuery

Looking for a clever jQuery trick to determine if something other than a specific element (and its descendants) was clicked? <body> <header></header> <p>stuff<p> <div class="floating-form"> <form>more st ...

javascriptjquery

Obtaining a JSON object from a multipart request using Node.js

const form = new formidable.IncomingForm(); form.parse(req, function(err, fields, files) { if (err) { res.status(200).send('parsing error'); } }); let jsonObject; let imageArray = []; form.on('file', function(field, fi ...

javascriptjsonnode.jsformidable