I'm working with Bootstrap5 and Vue 3. I have multiple buttons and each of them is triggering one collapse.
What I want is that if I open one collapse all other collapse should be closed. But now every collapse will be shown and the other ones are not closing.
I've tried to use data-parent and data-bs-parent but non of this is working.
How can I achive that? Thank You!
<div class="row margin-top">
<div class="col">
<div class="d-grid gap-2">
<button type="button" class="btn color-success" style="height: 200px;" data-bs-toggle="collapse" data-bs-target="#collapse-b1" aria-expanded="false" aria-controls="collapse-b1" data-bs-parent="#myGroup">
Button 1
</button>
</div>
</div>
<div class="col">
<div class="d-grid gap-2">
<button type="button" class="btn color-primary" style="height: 200px;" data-bs-toggle="collapse" data-bs-target="#collapse-b2" aria-expanded="false" aria-controls="collapse-b2" data-bs-parent="#myGroup">
Button 2
</button>
</div>
</div>
</div>
<div>
<div class="collapse" id="collapse-b1">
<div class="mt-3">
Text 1
</div>
</div>
<div class="collapse" id="collapse-b2">
<div class="mt-3">
Text 2
</div>
</div>
</div>
A few minor changes to make it work
Your code requires some minor fixes to work correctly. Add the data-bs-parent="#myGroup" attribute to each collapse. And then assign the same id to the parent element of the collapsible elements, i.e., the container.
Note that attribute name has been changed from data-parent in Bootstrap 4 to data-bs-parent in Bootstrap 5. And the parent is the element that contains the collapsible elements and NOT the container of the buttons and links used to toggle.
Additionally, buttons need to have the correct classes applied, e.g., btn-primary and btn-success.
Related SO Question: Collapse other sections when one is expanded
Run the snippet to see how it works:
<div class="row margin-top">
<div class="col">
<div class="d-grid gap-2">
<button type="button" class="btn btn-success" style="height: auto;" data-bs-toggle="collapse" data-bs-target="#collapse-b1" aria-expanded="false" aria-controls="collapse-b1">
Button 1
</button>
</div>
</div>
<div class="col">
<div class="d-grid gap-2">
<button type="button" class="btn btn-primary" style="height: auto;" data-bs-toggle="collapse" data-bs-target="#collapse-b2" aria-expanded="false" aria-controls="collapse-b2">
Button 2
</button>
</div>
</div>
</div>
<div id="myGroup"> <!-- Add the parent id here -->
<div class="collapse" id="collapse-b1" data-bs-parent="#myGroup">
<div class="alert alert-success mt-3">
Text 1
</div>
</div>
<div class="collapse" id="collapse-b2" data-bs-parent="#myGroup">
<div class="alert alert-primary mt-3">
Text 2
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
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'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">
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>
I just finished another front end website. I learned how to access the twitch api this time and I learned a lot. But I am still struggling with how bootstrap works. I figure the problem is has to do with how I am using the grid system.
The site looks great on a medium size screen and large screen. It even works well on phone size screens. But a tablet size, there is a lot of white space on the left side of the application(purple space), I can't figure out how to fix it, any tips? Thanks! http://codepen.io/freefora11/full/GodeRM/
<div class="container">
<div class="twitch">
<h1 class="text-center"> Twitch API App</h1>
</div>
<div class="col-md-3 col-md-offset-1 col-xs-3 col-xs-offset-1 buttons">
<div class="col-md-6 col-xs-6 show">
<p>All</p>
<p style="color:#A2FE1F">Online</p>
<p style="color:#DA2E3E">Offline</p>
</div>
<div class="col-md-6 col-xs-6 but">
<button type="button" class="btn btn-sm btn-default" id="all">show</button>
<button type="button" class="btn btn-sm btn-success" id="on">show</button>
<button type="button" class="btn btn-sm btn-danger" id="off">show</button>
</div>
</div>
<div class="content col-md-3 col-xs-1">
</div>
</div>
</div>
</div>
Actually the entire grid structure you used here is incorrect. I have provided the correct structure below before which I will give some tips to make it better.
1) It is always advised to wrap all the .col- classes inside class="row".
2) In .col-md-x, the addition of the x values for a particular device(lg/md/sm/xs) should be 12 by default. In your case the outer .col-md- is adding upto only 6. class="col-md-3" + class="col-md-3". I have provided the updated structure below.
3) Remove the col-md-offset-1 and col-xs-offset-1.
4) Remove the margin-left: 200px; from the class buttons in your styles.
<div class="container">
<div class="twitch">
<h1 class="text-center"> Twitch API App</h1>
</div>
<div class="row">
<div class="col-md-2 col-lg-2"></div>
<div class="col-md-2 col-lg-2 col-sm-3 buttons">
<div class="col-md-6 col-xs-6 show">
<p>All</p>
<p style="color:#A2FE1F">Online</p>
<p style="color:#DA2E3E">Offline</p>
</div>
<div class="col-md-6 col-xs-6 but">
<button type="button" class="btn btn-sm btn-default" id="all">show</button>
<button type="button" class="btn btn-sm btn-success" id="on">show</button>
<button type="button" class="btn btn-sm btn-danger" id="off">show</button>
</div>
</div>
<div class="content col-md-6 col-lg-6 col-sm-6">
<!--The details content comes here-->
</div>
<div class="col-md-2 col-lg-2 col-sm-2"></div>
</div>
</div>
Please note this is made responsive only till the tablet/small devices as you wanted. For mobile devices you need to add and adjust all the -xs- classes the way you want.
I have a main template to do some wizard like stepping through some templates:
<div ng-controller="StepController">
<div ng-switch="step">
<div ng-switch-when="1">
<div ng-controller="ImportController">
<div ng-include src="'static/javascripts/import/upload.html'">
</div>
<button type="button" class="btn btn-success btn-s" ng-click="setStep(2)"> Next Step</button>
</div>
<div ng-switch-when="2">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button type="button" class="btn btn-success btn-s" ng-click="setStep(3)"> Next Step</button>
</div>
<div ng-switch-when="3">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button ng-click="setStep(3)"></button>
</div>
</div>
However when I click on the first button to render the next template I get the error
Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found
When I look at the source after clicking the button the ng-switch div tag is there so I am not sure why it is not working.
I'm pretty sure you're missing some closing elements. I reformatted the code as written.
<div ng-controller="StepController">
<div ng-switch="step">
<div ng-switch-when="1">
<div ng-controller="ImportController">
<div ng-include src="'static/javascripts/import/upload.html'">
</div>
<button type="button" class="btn btn-success btn-s" ng-click="setStep(2)"> Next Step</button>
</div>
<div ng-switch-when="2">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button type="button" class="btn btn-success btn-s" ng-click="setStep(3)"> Next Step</button>
</div>
<div ng-switch-when="3">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button ng-click="setStep(3)"></button>
</div>
</div>
With the missing elements
<div ng-controller="StepController">
<div ng-switch="step">
<div ng-switch-when="1">
<div ng-controller="ImportController">
<div ng-include src="'static/javascripts/import/upload.html'">
</div>
<button type="button" class="btn btn-success btn-s" ng-click="setStep(2)"> Next Step</button>
</div>
</div>
<div ng-switch-when="2">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button type="button" class="btn btn-success btn-s" ng-click="setStep(3)"> Next Step</button>
</div>
</div>
<div ng-switch-when="3">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button ng-click="setStep(3)"></button>
</div>
</div>
</div>
</div>
The issues is that in the incorrect code, the second and third ng-switch-when elements are not directly below the ng-switch element. ng-switch-when looks at it's parent element for the ng-switch statement, which is missing.