Hello I am using bootstrap-5 collapses. I have multiple collapses an I need to trigger them all using jquery(not bootstrap button).Here are my collapses.Here is my code
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
Related
I have implemented web component using LIT Element and integrated bootstrap5 in it.
when I try to call modal/popovers/tooltip etc... it is not working.
render(){
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
}
when I click on button it is not responding.
Can any one help me how to enable the JavaScript functionality in LIT Element.
Thanks in Advance :)
I am using the accordion class to display some data in tables. My code loops through all the table rows and assigns them to an accordion dropdown. My problem is when I select one accordion header they all expand/collapse instead of just the one I clicked on.
<div class="accordion" id="qc_inspection">
<div class="accordion-item">
<h1 class="accordion-header">
<button class="accordion-button d-block text-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h1 class="display-6">{{table['inspection']}}</h1>
</button>
</h1>
<div id="collapseOne" class="accordion-collapse">
<div class="accordion-body">
<input type="text" placeholder="Weight" class="form-control"
value="{{ request.form['weight'] }}"></input>
{{table['min']}} to {{table['max']}} grams
</div>
</div>
</div>
</div>
Code works fine if I create each collapsible row independently and take the for loop out, but the number of rows changes depending on the table selected so that will not work.
assigning a unique value to data-bs-target and the accordion body id worked. it does not like just numeric values so I added "a" in front of the value. See working code below:
<div class="accordion">
<div class="accordion-item">
<h1 class="accordion-header">
<button class="accordion-button d-block text-center" type="button" data-bs-toggle="collapse" data-bs-target="#a{{table['id']}}" aria-expanded="false" aria-controls="collapseOne">
<h1 class="display-6">{{table['inspection']}}</h1>
</button>
</h1>
<div id="a{{table['id']}}" class="accordion-collapse">
<div class="accordion-body">
<input type="text" placeholder="Weight" class="form-control"
value="{{ request.form['weight'] }}"></input>
{{table['min']}} to {{table['max']}} grams
</div>
</div>
</div>
</div>
I want to have a multiple nested offcanvas for Bootstrap 5.
When I click a button, the first offcanvas should be opened and then click another button which is on the first offcanvas, the second offcanvas should be opened over the first offcanvas and the first offcanvas should not be closed.
I will make second one smaller and so the first one still be shown.
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample2" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample3" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample4" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample6" role="button" aria-controls="offcanvasExample">
<i class="fas fa-bars"></i>
</a>
</div>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample6" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
From the Bootstrap docs...
"Similar to modals, only one offcanvas can be shown at a time."
I'm working on making an FAQ page and have a bootstrap collapse with the categories of questions as the collapse titles and the questions as the body.
I'm using the same collapse for both the index and question display pages and I am passing a local variable local: { display: boolean } to differentiate.
I loop through the categories collection to make each table row
<% #categories.each_with_index do |category, index| %>
I have conditionals in the class and aria-expanded of the trigger element:
class='<%= "collapsed" if !display || category != #question.category %>'
aria-expanded='<%= category == #question.category %>'
And in the class of the target
class='collapse <%= "show" if display && category == #question.category %>'
The page loads with the correct row open but it doesn't close when triggered.
Everything is described in the Bootstrap documentation
To achieve what you need, you have to:
For buttons/headers:
set data-toggle="collapse"
if the content of the target has to be hidden, then set aria-expanded="false"
if the content of the target has to be displayed, then set aria-expanded="true"
For the targets:
set class="collapse" if the target has to be hidden
set class="collapse show" if the target has to be displayed
Here is an example
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
</p>
<div class="row">
<div class="col">
<div class="collapse show multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
First element content (displayed by the default)
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Second element content
</div>
</div>
</div>
</div>
I am trying to create a Button Group in Bootstrap with 3 buttons.
The last 'Delete' button also has a Modal attached to it. My code looks like this to get the Modal to work.
<div class="btn-group btn-group-sm">
V
E
D
</div>
Above code works and buttons are nicely grouped. The Modal works on the Delete button. But when I do below code to get the tooltip and modal to work on the Delete button, the button is not part of the group anymore and becomes a button on its own.
<div class="btn-group btn-group-sm">
V
E
<span data-toggle="modal" data-target="#deleteModal">
D
</span>
</div>
See my code below and you may find your answer.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Things You Trird<br><br>
<div class="btn-group btn-group-sm">
V
E
<span data-toggle="modal" data-target="#deleteModal">
D
</span>
</div>
<br><br>
<div class="btn-group btn-group-sm">
V
E
D
</div>
<hr>
Things I tried....
<br><br>
<div class="btn-group btn-group-sm">
V
E
<a href="#" class="btn btn-danger" role="button" data-toggle="tooltip" data-placement="top" title="Delete">
<span data-toggle="modal" data-target="#deleteModal">D</span>
</a>
</div>
<div id="deleteModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>