We Keep Coding

In Bootstrap V5, How to prevent accordion from toggling when element in header is clicked?

I know in bootstrap v4 we can use e.stopPropagation(); to prevent accordion from toggling when element in header is clicked.
Like this question.
How to prevent accordion from toggling when button in header is clicked?
However, this method seems not working in Bootstrap v5.
Here is the example.
https://jsfiddle.net/8qdbjfx2/4/
Curious about how to do it?
Thanks for yours answer.

I don't know if you've solved your problem but I found one solution.
Based on that I created a simpler 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">
<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>

How to get the data-mx from .accordion-header BS5

I want to extract a value from data-mx I created. When I click the .accordion-header. The max property will assign to input#mxlen to control the max number input. I stuck at sending data-mx to the input.
$('.accordion-header').on('click', function() {
var tabID = $(this).find('button').data('mxlen');
$('#mxlen').prop('max', mxlen); //assign max=data-mxlen
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" data-mx="999">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" data-mx="99">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" data-mx="9">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
<input type="number" name="mxlen" min="0" max="" id="mxlen" />
The problem is I cannot transfer the data-mx to the max property in input#mxlen

Use var tabID = $(this).find('button').data('mx'); instead of var tabID = $(this).find('button').data('mxlen');
And $('#mxlen').prop('max', tabID); instead of $('#mxlen').prop('max', mxlen);
$('.accordion-header').on('click', function() {
var tabID = $(this).find('button').data('mx');
console.log(tabID);
$('#mxlen').prop('max', tabID); //assign max=data-mxlen
});
$("#mxlen").on("keyup", function () {
var maxLength = $(this).attr("max");
if (+$(this).val() > +maxLength) { alert("Please order below " + maxLength + " units.") }
})
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" data-mx="999">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" data-mx="99">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" data-mx="9">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
<input type="number" name="mxlen" min="0" max="" id="mxlen" />

Prevent Bootstrap 5 Accordion from collapsing

I'm using Bootstrap 5's Accordion component. Good news: it works perfectly well!
But the button for collapse the accordion is big, so I want to add an additional link in it, for some extra stuff.
<div class="accordion accordion-flush" id="myaccordion">
<div class="accordion-item">
<!-- important part starts here -->
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-001" aria-expanded="false" aria-controls="collapse-001">
<img src="https://picsum.photos/50/50" alt="such a nice pic"/>
<p>Sneak peek of what will appear</p>
Let's go
<button>
<!-- important part is over -->
<div id="collapse-001" class="accordion-collapse collapse" aria-labelledby="heading-001" data-bs-parent="#myaccordion">
<div class="accordion-body">
<p>Hidden stuff goes here</p>
</div>
</div>
</div>
<div class="accordion-item">
...
</div>
</div>
What I want : Clicking anywhere in the button will open the accordion, but not if I click on the link. If I click on the link, I want to follow the href.
What I get : Clicking anywhere in the button will open the accordion, even if I click on the link.
I tried to add an extra e.preventDefault() or e.stopPropagation() on the link, without success :(
Any idea?

I tried nesting the anchor inside the button but it won't work. The click event is always catched at the button level.
I didn't check bootstrap source code to check for alternatives but found a way to achieve what you asked using the following method: puth both the button and the link as children of a div and tweak with css to keep it visually on the same "line".
<h2 class="accordion-header" id="headingOne">
<div class="d-flex">
<div class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</div>
<a class="outlink" href="https://pullman.clubify.cl">Let's go</a>
</div>
</h2>

Bootstrap - Cant get my Accordion to stay closed on default?

I have a single accordion item that I am using for a read more / less link on a page.
The purpose of this is to click it to read more, and a few paragraphs will follow.
I have this working, but I need it to stay closed when the page loads, at the moment the page loads with the item open.
What can I add to fix this?
<div class="accordionMod panel-group">
<div class="accordion-item">
<h4 class="accordion-toggle">Read More / Less</h4>
<section class="accordion-inner panel-body">
<p>more info.</p>
<h4 class="title">More titles</h4>
<p>more content</p>
</section>
</div>
</div>

I think this will work
<div class="accordion" id="myAccordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Content
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseTwo">
Title
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Content
</div>
</div>
</div>
</div>
if you add the class in to accordion-body collapse it will be open by default.

Sounds like you don't need an accordion, which has multiple panels, only one of which can open at a time. Instead, just use collapse which allows you to toggle the visibility of a section of the page.
Panel Visibility
From the collapse docs:
The collapse plugin utilizes a few classes to handle the heavy lifting:
.collapse hides the content
.collapse.in shows the content
.collapsing is added when the transition starts, and removed when it finishes
Thus, to start off collapsed, just make sure your extra content has the class collapse and not in
Simple HTML
To use collapse, you really just need to specify a data-toggle="collapse" and then point the collapse to the css selector of the section you would like to toggle using data-target.
Here's a bare bones example that just exposes the collapsing functionality:
<a data-toggle="collapse" data-target="#ReadMoreInfo" href="#">
Read More / Less
</a>
<div id="ReadMoreInfo" class="collapse">
<p> More Info Here </p>
</div>
HTML with Bootstrap classes
All the other bootstrap classes are just to help make the collapsible panel look like a collapsible panel. I would recommend formatting them like this or doing a lot of custom CSS work. Even if you wanted to do the CSS yourself, starting off with this template and then overriding the styles would be best.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse"
data-target="#ReadMoreInfo"
href="#ReadMoreInfo">
Read More / Less
</a>
</h4>
</div>
<div id="ReadMoreInfo" class="panel-collapse collapse">
<div class="panel-body">
<p>more info.</p>
<h4 class="title">More titles</h4>
<p>more content</p>
</div>
</div>
</div>
Working Demo in jsFiddle
Screenshot:

Removing the in class did not work for me in my case(though normally it should). I was just looking for the answer to this question yesterday. I used this to make the accordion default to close:
$( document ).ready(function() {
$('.collapse').collapse({
toggle: false
});
});
See also this question on:
Jquery accordion not collapse by default

if accordion is with icon, add collapsed class name to :
<a class="accordion-toggle accordion-toggle-styled collapsed" >
and add collapse class name to:
<div id="collapse0" class="panel-collaps collapse">
complete code is:
<div class="panel-group accordion" id="accordion0">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle accordion-toggle-styled collapsed" data-toggle="collapse" data-parent="#accordion0" href="#collapse0">
Collapsible Header Text
</a>
</h4>
</div>
<div id="collapse_3_1" class="panel-collaps collapse">
<div class="panel-body">
<p> body text
</p>
</div>
</div>
</div>
</div>

It's easy. In Bootstrap 5, edit your HTML to remove the "show" class from your first accordion item. See Make accordion closed by default in Bootstrap, the answer that starts "Was recently working with Bootstrap".

Bootstrap collapse with just one element shown

I'm trying to use the collapse components of Bootstrap.
It works well but I noticed that sometimes it doesn't close all the other elements; when I click in order from the first to the third and then back to the first again, the third one remains open.
My markup is the same as the example code that Bootstrap provides, because I'm just testing for now.
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Part 1
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Part 2
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Part 3
</div>
</div>
</div>
The JavaScript code is this:
$(".collapse").collapse("#accordion2");
Considering that I'm thinking to use this components in a menu, in order to show a group open according to a PHP variable value do I just have to print the class in to the div collapseOne/collapseTwo and so on?

You do not need the javascript part, in fact - remove it!! It is that code precisely that causes the strange behaviour - accordion2 is initialized twice resulting in a double set of "logic". Your problem is fully reproduceable by using either the javascript or not.
Generally, regarding twitter bootstrap, when you can place all your data and binding-functionality in data attributes, as you have done here, you'll never have to do javascript. TB does the job automatically when the page is loading, by looking for those data attributes.
Consider javascript as a second option, an alternate way, when you cant do what you want by simply adressing the data attributes.

If you made your markup according to bootstrap collapse docs you can achieve this with the following jQuery code:
$(document).on('click', '.accordion-toggle', function(e) {
event.preventDefault();
$('#accordion2').find('.accordion-body').collapse('hide');
$(this).parent().next().collapse('show');
});