I created a collapsable menu with bootstrap.
The main collapse work as expected; when one button is selected, other collapses.
Inside each collapse I added other collapsable buttons.
However, when there is another collapse inside it doesn't collapse the other section.
When "content 2 inner" button is selected, after that "content 1 ineer" button is selected both remains uncollapsed
You can check https://codepen.io/snarex/pen/WqrvpP
<div class="container" id="myGroup">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
content 1
</button>
<div class="collapse" id="collapseExample" data-parent="#myGroup">
<div class="card card-body">
<div class="row" id="myGroup1">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample11"
role="button" aria-expanded="false" aria-controls="collapseExample11">
content 1 inner
</button>
<div class="collapse" id="collapseExample11" data-parent="#myGroup1">
<div class="card card-body">
Content 1 inner one here
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample12" aria-expanded="false" aria-controls="collapseExample2">
Content 2 inner
</button>
<div class="collapse" id="collapseExample12" data-parent="#myGroup1">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2"
aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
<div class="collapse" id="collapseExample2" data-parent="#myGroup">
<div class="card card-body">
<div class="row" id="myGroup2">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample21"
role="button" aria-expanded="false" aria-controls="collapseExample21">
content 1 inner
</button>
<div class="collapse" id="collapseExample21" data-parent="#myGroup2">
<div class="card card-body">
Content inner one here
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapseExample22" aria-expanded="false"
aria-controls="collapseExample22">
Content 2 inner
</button>
<div class="collapse" id="collapseExample22" data-parent="#myGroup2">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The data-parent needs to be the parent of both, not a sibling like you have with the rows. Make the card the parent...
https://www.codeply.com/go/DRxAXQF7E7
<div class="container" id="myGroup">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
content 1
</button>
<div class="collapse" id="collapseExample" data-parent="#myGroup">
<div class="card card-body" id="myGroup1">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample11" role="button" aria-expanded="false" aria-controls="collapseExample11">
content 1 inner
</button>
<div class="collapse" id="collapseExample11" data-parent="#myGroup1">
<div class="card card-body">
Content 1 inner one here
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample12" aria-expanded="false" aria-controls="collapseExample2">
Content 2 inner
</button>
<div class="collapse" id="collapseExample12" data-parent="#myGroup1">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Content 2
</button>
<div class="collapse" id="collapseExample2" data-parent="#myGroup">
<div class="card card-body" id="myGroup2">
<div class="row">
<div class="col-lg-12">
<button class="btn btn-primary" data-toggle="collapse" href="#collapseExample21" role="button" aria-expanded="false" aria-controls="collapseExample21">
content 1 inner
</button>
<div class="collapse" id="collapseExample21" data-parent="#myGroup2">
<div class="card card-body">
Content inner one here
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-lg-12">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample22" aria-expanded="false" aria-controls="collapseExample22">
Content 2 inner
</button>
<div class="collapse" id="collapseExample22" data-parent="#myGroup2">
<div class="card card-body">
Content 2 inner here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Related
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>
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?
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">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingOne">
<i class="pe-7s-angle-up-circle" style="color:#3d68e0;font-size:16px;" data-toggle="collapse" data-target="#collapseOne"></i>
<font data-toggle="collapse" data-target="#collapseOne">Header</font>
</div>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingTwo">
<i class="pe-7s-angle-up-circle" style="color:#3d68e0;font-size:16px;" data-toggle="collapse" data-target="#collapseTwo"></i>
<font data-toggle="collapse" data-target="#collapseTwo">Detail</font>
</div>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingThree">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseThree"></i>
<font data-toggle="collapse" data-target="#collapseThree">Vendor Price Detail</font>
</div>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingFour">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFour"></i>
<font data-toggle="collapse" data-target="#collapseThree">Debtor Price Detail</font>
</div>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br />
<div class="card">
<div class="card-header">
<div class="card-header-title" style="border-radius:0px;cursor:pointer;" id="headingFive">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFive"></i>
<font data-toggle="collapse" data-target="#collapseThree">Tesco</font>
</div>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
</div>
The Code i Copy from link: https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=accordion
I just change the button to font
My Problem is:
The code should be toggle but I click 1 more time to close the card body (not working). Only press other collapse then its close.
How to solve this.
The issue you are facing is because <font> have display CSS attribute value inline by default, I would suggest to not using it since its obsolete, to fix the issue I replaced <font> tag with <div>
Note: I also fixed the the collapse attribute for the some of the accordion elements and moved the inline CSS to CSS classes.
.card-header-title {
border-radius:0px;
cursor:pointer;
}
.pe-7s-angle-up-circle {
color:#3d68e0;
font-size:16px
}
font {
display: block
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingOne">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseOne"></i>
<div data-toggle="collapse" data-target="#collapseOne">Header</div>
</div>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingTwo">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseTwo"></i>
<div data-toggle="collapse" data-target="#collapseTwo">Detail</div>
</div>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingThree">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseThree"></i>
<div data-toggle="collapse" data-target="#collapseThree">Vendor Price Detail</div>
</div>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingFour">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFour"></i>
<div data-toggle="collapse" data-target="#collapseFour">Debtor Price Detail</div>
</div>
</div>
<div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
<br />
<div class="card">
<div class="card-header">
<div class="card-header-title" id="headingFive">
<i class="pe-7s-angle-up-circle" data-toggle="collapse" data-target="#collapseFive"></i>
<div data-toggle="collapse" data-target="#collapseFive">Tesco</div>
</div>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
<div class="card-body">
123
</div>
</div>
</div>
</div>
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')!