I want to create a nested bootstrap collapse. The collapse with id="ss11" which acts as the parent works when its button is clicked but the other nested do not work. where could I have gone wrong? how do I get those nested collapse to work when their buttons are clicked. here is the HTML
<div class="card-body">
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss11" aria-expanded="false" aria-controls="ss11">
ss1 : science
</button>
</div>
<div class="collapse" id="ss11">
<div class="card card-body">
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12013/20141" aria-expanded="false" aria-controls="ss12013/20141">
2013/20141
</button>
</div>
<div class = "collapse" id = "ss12013/20141">
<p>hello lindsay lowhay</p>
</div>
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12014/20151" aria-expanded="false" aria-controls="ss12014/20151">
2014/20151
</button>
</div>
<div class = "collapse" id = "ss12014/20151">
<p>hello lindsay lowhay</p>
</div>
</div>
</div>
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12" aria-expanded="false" aria-controls="ss12">
ss1 : art
</button>
</div>
<div class="collapse" id="ss12">
<div class="card card-body">
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12013/20142" aria-expanded="false" aria-controls="ss12013/20142">
2013/20142
</button>
</div>
<div class = "collapse" id = "ss12013/20142">
<p>hello lindsay lowhay</p>
</div>
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12014/20152" aria-expanded="false" aria-controls="ss12014/20152">
2014/20152
</button>
</div>
<div class = "collapse" id = "ss12014/20152">
<p>hello lindsay lowhay</p>
</div>
</div>
</div>
</div>
You can't have "/" in the name/ID; you can replace this with
hyphen "-"
Underscore "_"
to get the behavior that you're looking for...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="card-body">
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss11" aria-expanded="false" aria-controls="ss11">
ss1 : science
</button>
</div>
<div class="collapse" id="ss11">
<div class="card card-body">
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12013_20141" aria-expanded="false" aria-controls="ss12013_20141">
2013/20141
</button>
</div>
<div class="collapse" id="ss12013_20141">
<p>hello lindsay lowhay</p>
</div>
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12014-20151" aria-expanded="false" aria-controls="ss12014-20151">
2014/20151
</button>
</div>
<div class="collapse" id="ss12014-20151">
<p>hello lindsay lowhay</p>
</div>
</div>
</div>
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12" aria-expanded="false" aria-controls="ss12">
ss1 : art
</button>
</div>
<div class="collapse" id="ss12">
<div class="card card-body">
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12013-20142" aria-expanded="false" aria-controls="ss12013-20142">
2013/20142
</button>
</div>
<div class="collapse" id="ss12013-20142">
<p>hello lindsay lowhay</p>
</div>
<div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#ss12014_20152" aria-expanded="false" aria-controls="ss12014_20152">
2014/20152
</button>
</div>
<div class="collapse" id="ss12014_20152">
<p>hello lindsay lowhay</p>
</div>
</div>
</div>
</div>
Related
I'm calling Bootstrap 5 modal from dropdown but instead of showing content it shows only grey background. What I'm missing?
Here is jsfiddle and here is code:
<div class="container">
<div class="row">
<div class="inline-block">
<div class="dropdown">
<button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-primary">Dropdown</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#test">
Launch demo modal
</button>
<div class="modal fade" id="test" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<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>
</li>
</ul>
</div>
</div>
</div>
</div>
The modal code should be outside the <ul> tag
<div class="container">
<div class="row">
<div class="inline-block">
<div class="dropdown">
<button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-primary">Dropdown</button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<button type="button" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#test">
Launch demo modal
</button>
</li>
</ul>
</div>
</div>
</div>
<div class="modal fade" id="test" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<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>
</div>
I am wanting to put the Modal trigger button into the navbar of the _Layout.cshtml, and be able to open the modal regardless of what url I am currently on.
My modal is housed inside a folder structure of abc/forms/create
I am only able to fire the modal up when on that page, im not quite sure how to get around the issue. for example if i was on the page of abc/forms/record the modal wouldnt fire
Below is my code for the modal (I have removed all inputs and labels etc... to save space
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
nav bar below
<nav class="navbar navbar-expand-lg navbar-light bg-dark py-3 mb-4 " style=" border-bottom: 3px solid #5bc0de;">
<div class="col-md-2">
<a asp-page="/Index">
<img src="~/assets/logo-bg.png" class="img-responsive" asp-area="" asp-page="/Index" />
</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active ">
<a class="navbar-brand text-info mr-auto m-3 mr-2 " asp-area="" asp-page="/Index"><i class="fas fa-home text-success m-1"></i>Home</a>
</li>
<li class="nav-item">
<a class="navbar-brand text-info mr-auto m-3 mr-2" asp-area="" asp-page="/Forms/Index"><i class="far fa-calendar-alt text-warning m-1"></i>Resolution</a>
</li>
<li>
<a class="navbar-brand text-info mr-auto m-3 mr-2" asp-area="" asp-page="/Forms/Records"><i class="far fa-folder-open text-danger m-1"></i>Records</a>
</li>
<li>
<a class="navbar-brand text-info mr-auto m-3 mr-2" asp-area="" asp-page="/Forms/Create"><i class="far fa-folder-open text-danger m-1"></i>Create</a>
</li>
</ul>
<form class="form-inline">
#*<a class="btn btn-info form-control text-white d-inline-block m-3" style="width: 150px; ">Create Record</a>-->*#
<a asp-page="/Forms/Create" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Create
</a>
</form>
#*<Partial name="_PartialButton" />*#
</div>
</nav>
Refer to Partial View in Asp.net core. Below is a simple demo.
Model:
public class User
{
public string Forename { get; set; }
}
_Layout.cshtml:
<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Create
</button>
<partial name="_ModalPartial.cshtml" model="new User()" />
__ModalPartial.cshtml:
#model User
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label asp-for="Forename"></label>
<input asp-for="Forename" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Result:
I have the problem with center all button in each col-md-4:
<div class="row position-relative mt-2">
<div class="col-md-4 center-block">
<div class="center-block align-to-bottom">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block" type="button">
button
</button>
</p>
<p>
<button class="btn btn-warning btn-sm btn-block" type="button">
button
</button>
</p>
</div>
</div>
</div>
<div class="col-md-4 center-block">
<div class="btn-group-vertical">
<p>
<button class="btn btn-info btn-sm btn-block" type="button">
button
</button>
</p>
<p>
<button class="btn btn-info btn-sm btn-block" type="button">
button
</button>
</p>
<p>
<button class="btn btn-warning btn-sm btn-block" type="button">
button
</button>
</p>
</div>
</div>
<div class="col-md-4 center-block">
<p>
<button class="btn btn-success btn-sm btn-block" type="button">
button
</button>
</p>
</div>
</div>
Also second question -> I uses also w-100, h-85... But it is no working. I am also looking for solution to set up relative size of buttons.
To horizontally align a button you can just add the class text-center to your parent column.
I also removed the p tags and instead added the margin to the button itself with the class mb-2
I did remove a lot of your classes too as they didn't seem to be Bootstrap 4 classes. If these are needed just add them back where you think neccessary.
Also rather than making your button a block which gives it the full width of your parent, I just added another row and put each button in its own full width column which will act as the block.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row mt-2">
<div class="col-md-4 text-center">
<div class="row">
<div class="col-12 mb-2">
<button class="btn btn-info btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-warning btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-warning btn-sm" type="button">
Button
</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<div class="row">
<div class="col-12 mb-2">
<button class="btn btn-info btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-info btn-sm" type="button">
Button
</button>
</div>
<div class="col-12 mb-2">
<button class="btn btn-warning btn-sm" type="button">
Button
</button>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<button class="btn btn-success btn-sm" type="button">
Button
</button>
</div>
</div>
I hope this solves your issues, let me know if it's not quite what you were looking for.
The accordion panel looks like this
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
This is some content.
</div>
</div>
The content is displayed below the button.
How do I move the collapse panel to the right side of the button? As shown below
if you are using bootstrap then do it in proper way, using rows and cols. This way you will get responsive layout too.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div class="row">
<div class="col-auto">
<a class="btn btn-primary btn-block" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</div>
<div class="col">
<div class="collapse" id="collapseExample">
<div class="card card-body">
This is some content.
</div>
</div>
</div>
</div>
You can wrap this in a div and give class d-flex and give flex-grow-1 to collapse
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<div class="d-flex">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="collapse flex-grow-1" id="collapseExample">
<div class="card card-body">
This is some content.
</div>
</div>
</div>
I have three buttons that expand/collapse three divs, using Bootstrap. However, if I click on two different buttons in succession I get two divs expanded one after the other. Is it possible that before one div is expanded all others are collapsed so that only one div at a time can be visible?
Right now, if I had clicked on button 1 to expand Div1, I have to click on the button 1 again to collapse Div1 before I can click on button 2; otherwise contents of Div1 and Div2 both are displayed.
This is what I have:
<div class="btn-group btn-group-justified">
<div class="col-sm-6 col-md-4 col-lg-4">
<button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div1" aria-expanded="false" aria-controls="Div1">Div1 Button<span class="caret"></span>
</button>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div2" aria-expanded="false" aria-controls="Div2">Div2 Button<span class="caret"></span>
</button>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<button class="btn btn-lg open-group" type="button" data-toggle="collapse" data-target="#Div3" aria-expanded="false" aria-controls="Div3">Div3 Button<span class="caret"></span>
</button>
</div>
</div>
<div class="collapse" id="Div1">Content of Div1 here </div>
<div class="collapse" id="Div2">Content of Div2 here </div>
<div class="collapse" id="Div3">Content of Div3 here </div>
So you need to set a parent using data-parent="#parentdiv" to the toggle then have the class panel to contain all toggleddivs.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="parentdiv"class="btn-group btn-group-justified">
<div class="panel">
<div class="col-sm-6 col-md-4 col-lg-4">
<button class="btn btn-lg open-group" type="button" data-parent="#parentdiv" data-toggle="collapse" data-target="#Div1" aria-expanded="false" aria-controls="Div1">Div1 Button<span class="caret"></span>
</button>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<button class="btn btn-lg open-group" type="button" data-parent="#parentdiv" data-toggle="collapse" data-target="#Div2" aria-expanded="false" aria-controls="Div2">Div2 Button<span class="caret"></span>
</button>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
<button class="btn btn-lg open-group"data-parent="#parentdiv" type="button" data-toggle="collapse" data-target="#Div3" aria-expanded="false" aria-controls="Div3">Div3 Button<span class="caret"></span>
</button>
</div>
<div class="collapse" id="Div1">Content of Div1 here </div>
<div class="collapse" id="Div2">Content of Div2 here </div>
<div class="collapse" id="Div3">Content of Div3 here </div>
</div>
</div>