BS5 accordion disappear every click on header - javascript

I'm using BS5 accordion. Comparing to the doc but don't see any difference. Everytime I click header - it's gone.
<link href="//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>
<script src="//cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="accordion accordion-flush" id="collapseMain">
<div class="accordion-item">
<h2 class="accordion-header" id="collapse1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="true" aria-controls="collapse1">head1</button>
</h2>
<div id="collapse1" class="accordion-collapse collapse show" aria-labelledby="collapse1" data-bs-parent="#collapseMain">
<div class="accordion-body">
xxx</div>
</div>
</div>
<!-- accordion-item -->
<div class="accordion-item">
<h2 class="accordion-header" id="collapse2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2">head2</button>
</h2>
<div id="collapse2" class="accordion-collapse collapse " aria-labelledby="collapse2" data-bs-parent="#collapseMain">
<div class="accordion-body">
xxx</div>
</div>
</div>
<!-- accordion-item -->
<div class="accordion-item">
<h2 class="accordion-header" id="collapse3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3">head3</button>
</h2>
<div id="collapse3" class="accordion-collapse collapse " aria-labelledby="collapse3" data-bs-parent="#collapseMain">
<div class="accordion-body">
xxx</div>
</div>
</div>
<!-- accordion-item -->
</div>
<!-- accordion accordion-flush -->

it's because you are using id="collapse1",
bootstrap5 supports id="heading1"
<h2 class="accordion-header" id="heading1">

Related

Boostrap 5 - can't disable collapse with stopPropagation() when clicking on a specific element

I'm trying to disable the collapse/expansion of an element when I click a checkbox within it.
For the example I have on codepen, my code worked with Boostrap v4, but with v5, the stopPropagation function seems to be ignored.
See here - https://codepen.io/s89_/pen/oNyKbYE
I could wrap the click functionality into a div that doesn't wrap around the input checkbox but I'd like the entire row width to be clickable so disabling event propagation seems easier.
HTML:-
<div id="collapse-example">
<div class="card col-6" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<div class="card-header d-flex justify-content-between" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link">
Collapsible Group Item #1
</button>
</h5>
<div class="checkboxes">
<input type="checkbox" id="custom-input">
</div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Loreum ipsum
</div>
</div>
</div>
</div>
JS
const input = document.getElementById('custom-input')
input.addEventListener('click', function(event) {
event.stopPropagation();
});
Add data-bs-toggle="collapse" to the checkbox
<input type="checkbox" id="custom-input" data-bs-toggle="collapse">
<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"/>
<div id="collapse-example">
<div class="card col-6" data-bs-target="#collapseOne" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseOne">
<div class="card-header d-flex justify-content-between" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link">
Collapsible Group Item #1
</button>
</h5>
<div class="checkboxes">
<input type="checkbox" id="custom-input" data-bs-toggle="collapse" >
</div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Loreum ipsum
</div>
</div>
</div>
</div>

vue exchange position between two tags

I am working on an assignment where I have to implement accordion. But there is a complex. I need to exchange the position of two accordions like this-- adode xd example
I have done the accordion part.
<template>
<div>
<div>
<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">
User
</button>
</h2>
</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">
View
</button>
</h2>
</div>
<div>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>User Content</strong>
</div>
</div>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>View Content</strong>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
How do I do the task using vue js? Can anyone help?

Bootstrap accordion unfold while scrolling

I would like to make the accordion which is shown below in the code in a way that all are unfolding while the user is scrolling down. At the moment only the first is unfold and the other are going to be unfold, when the user clicks the headline. How can I achieve this?
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h1 class="mb-0">
<button class="btn" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
A
</button>
</h1>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Text
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
B
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Text
<ul>Darum</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
C
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Text
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<h2 class="mb-0">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
D
</button>
</h2>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFive">
<h2 class="mb-0">
<button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
E
</button>
</h2>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body">
</div>
</div>
</div>
</div>
You can use .is(':visible') and create a loop for each accordion item.
For example: if $('#headingFour').is(':visible') then trigger click on $('#headingFour button')!

bootstrap accordion show by default on desktop and hide by default mobile

I'm kind of new to bootstrap so I'm not sure how I'd go about this.
I have a simple bootstrap accordion like in this snippet. It is split into multiple accordions because I want them to be able to expand and collapse independently from each other. (as in can expand and show all items or none, not just one expanded and the others collapsed)
I want to disable the expanding and collapsing on desktop and make sure each item is shown. But then on mobile I only want to have the first item shown and the others collapsed by default.
Any suggestions on how I could achieve this would be greatly appreciated.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading1">
<button class="btn btn-default" data-toggle="collapse" data-target="#body1" aria-expanded="true" aria-controls="body1">
//heading
</button>
</div>
<div id="body1" class="collapse show" aria-labelledby="heading1" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading2">
<button class="btn btn-default" data-toggle="collapse" data-target="#body2" aria-expanded="true" aria-controls="body2">
//heading
</button>
</div>
<div id="body2" class="collapse show" aria-labelledby="heading2" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>
<div id="accordion">
<div class="card">
<div class="card-header" id="heading3">
<button class="btn btn-default" data-toggle="collapse" data-target="#body3" aria-expanded="true" aria-controls="body3">
//heading
</button>
</div>
<div id="body3" class="collapse show" aria-labelledby="heading3" data-parent="#accordion">
<div class="product card-body">
//content
</div>
</div>
</div>
</div>
I have found a solution for this, please check below
CSS for desktop
.modified-accordion .card-header{ position: relative;}
.modified-accordion .card-header:after{ content: ''; position: absolute; width: 100%;
height: 100%; left: 0; top: 0;}
.modified-accordion .collapse:not(.show){ display: block;}
CSS for Mobile
#media (max-width: 767px) {
.modified-accordion .collapse:not(.show){ display: none;}
.modified-accordion .card-header:after{ display: none;}
}
HTML structure
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h2 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>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne">
<div class="card-body">Contect-1</div>
</div>
</div>
</div>
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 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>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
<div class="card-body">Content-2</div>
</div>
</div>
</div>
<div class="accordion modified-accordion">
<div class="card">
<div class="card-header" id="headingThree">
<h2 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>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree">
<div class="card-body">Content-3</div>
</div>
</div>
</div>

Expand and close accordion bootstrap

Hello i am struggle with something in accordeons here is my code and illuminate me please guys!!
<div id="tg-accordion" class="tg-accordion">
<div class="tg-panel">
<h4 class="active">Why is accreditation important</h4>
<div class="tg-panelcontent" style="display: block;">
<div class="tg-jobdescription">
<div class="tg-description">
<p>description</p>
</div>
</div>
</div>
</div>
<div class="tg-panel">
<h4 style="margin-bottom: 10px!important;">European Regulation 765/ 2008</h4>
<div class="tg-panelcontent" style="display: none;">
<div class="tg-jobdescription">
<div class="tg-description" style="margin-bottom: 10px!important;">
<p>description</p>
</div>
</div>
</div>
<div class="tg-panel">
<h4>Recognition of certifications. How accreditation provides recognition</h4>
<div class="tg-panelcontent" style="display: none;">
<div class="tg-jobdescription">
<div class="tg-description">
<p>description</p>
</div>
</div>
</div>
</div>
This is html and i have some jquery i want when i click second time to close that accordeon tab and when it`s open to have on tg-panel background blue.
And here is my Jquery:
$(function() {
$('.tg-panelcontent').hide();
// $('#tg-accordion h4:first').addClass('active').next().slideDown('slow');
$('#tg-accordion h4').click(function() {
if($(this).next().is(':hidden')) {
$('#tg-accordion h4').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
If you've already included Bootstrap's scripts, there are no need for additional scripts in order to do the behaviour you want. Check out this example, which is available at Bootstrap's official page.
With this, the data-toggle attribute at the <a> or <button> tags indicates that the element it's a "collapse toggler" and the href/data-target points to an element ID which is the container to be collapsed/expanded. Simple :)
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
You don't need anything. Only be sure that the link to CSS is on the top of the page and the Scripts and the end of the page. It should work fine.
<!-- CSS needed at the beginning of the page -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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">
Why is accreditation important
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
description
</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">
European Regulation 765/ 2008
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
description
</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">
Recognition of certifications. How accreditation provides recognition
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
description
</div>
</div>
</div>
</div>
<!-- Scripts needed at the end of the page -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
You can simple add the data-toggle="collapse" on the header's together with the data-target="#idOfYourElement" to trigger the collapse. And replace the display:none with the collapse class on the target element:
Working exemple:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="tg-accordion" class="tg-accordion">
<div class="tg-panel">
<h4 class="active" data-toggle="collapse" data-target="#targetOne">Why is accreditation important</h4>
<div class="tg-panelcontent collapse" id="targetOne">
<div class="tg-jobdescription">
<div class="tg-description">
<p>description</p>
</div>
</div>
</div>
</div>
<div class="tg-panel">
<h4 data-toggle="collapse" data-target="#targetTwo" style="margin-bottom: 10px!important;" >European Regulation 765/ 2008</h4>
<div class="tg-panelcontent collapse" id="targetTwo">
<div class="tg-jobdescription">
<div class="tg-description" style="margin-bottom: 10px!important;">
<p>description</p>
</div>
</div>
</div>
<div class="tg-panel">
<h4 data-toggle="collapse" data-target="#targetThree">Recognition of certifications. How accreditation provides recognition</h4>
<div class="tg-panelcontent collapse" id="targetThree">
<div class="tg-jobdescription">
<div class="tg-description">
<p>description</p>
</div>
</div>
</div>
</div>

Categories