I'm having a hard time with this. I'm trying to make it so when you click on a bootstrap linked-list item it expands to show additional text in an accordion fashion.
This is my code: http://www.bootply.com/6zXrStZ2o3
<div class="container">
<h1>Bootstrap 3 List Groups</h1>
<div class="list-group">
<a href="#" class="list-group-item">
Linked item in .list-group
</a>
<a href="#" class="list-group-item">Linked item in .list-group with Chevron and Badge
</a>
</div>
</div>
How can I make it so when I click on the title of one of the linked lists it expands to show more content?
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element
<div class="container">
<h1>Bootstrap 3 List Groups</h1>
<div class="list-group">
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#info1">
Linked item in .list-group
<div id="info1" class="collapse">More Info #1</div>
</a>
<a href="#" class="list-group-item" data-toggle="collapse" data-target="#info2">Linked item in .list-group with Chevron and Badge
<div id="info2" class="collapse">More Info #2</div>
</a>
</div>
</div>
Related
I am using Bulma and I made an hoverable dropdown, but the dropdown content exceeds the whole page content. How can I make it fixed with larger width and also responsive?
For now it looks like this:
Html code:
<div class="navbar-end">
<div class="dropdown is-hoverable navbar-item ">
<div class="dropdown-trigger">
<button aria-controls="dropdown-menu6" aria-haspopup="true" class="button is-primary">
<strong>Account</strong>
</button>
</div>
<div class="dropdown-menu has-text-centered" id="dropdown-menu6" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<p>Acces your quizbee account, test your skills and have fun. </p>
<hr class="dropdown-divider">
<div class="buttons is-centered">
<button class="button is-primary is-rounded">Register</button>
<button class="button is-light is-rounded">Login</button>
</div>
</div>
</div>
</div>
</div>
You just need to set a position of dropdown. Add class is-right
<div class="dropdown is-right is-active">
I have a code like this
<div class="col-md-12 p-0 m-0" type="button" data-toggle="collapse" data-target="#collapseFace" aria-expanded="false" aria-controls="collapseExample">
<div class="border-bottom border-top f-sz-18">
Face
</div>
</div>
<div class="collapse" id="collapseFace">
<div>
<div><a class="text-decoration-none text-dark f-sz-15 ml-3" href="">123</a></div>
</div>
</div>
How to disable so that the drop-down list does not work when following a link?
When I click on a link, for a split second I see how it starts to open, it's unpleasant
I have an accordion and collapse element and I am displaying using ngFor. I need the first element to show and the remaining to be hidden everytime.
I have tried modifying the ngClass attributes but it gets applied to every element in the for loop.
<div id="accordion">
<ul *ngFor="let group of records">
<div class="card">
<div class="card-header" attr.id="heading{{group.id}}">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" attr.data-target="#collapse{{group.id}}"
aria-expanded="false" (click)='toggleIcon()' attr.aria-controls="collapse{{group.id}}">
<i [ngClass]="{'fa':true,'fa-plus':icoPlus,'fa-minus':icoMinus}"></i>
<span id='region' class='region-heading'>{{group.regionName}}</span>
</button>
</h5>
</div>
<div attr.id="collapse{{group.id}}" [ngClass]="{'collapse':true, 'show':showEnabled}"attr.aria-labelledby="heading{{group.id}}" data-parent="#accordion">
<div class="card-body " >
<ul class='country-list' *ngFor="let country of group.countryList ">
<li class='country-name'>
{{country.countryName}}
<div class='divider'></div>
</li>
<ul *ngFor="let campus of country.campusList" class="list-group list-group-flush">
<li>
<div class='row'>
<div class='col-sm'>
{{campus.campusName}}
</div>
<div class='col-sm'>
{{country.countryName}}, {{campus.cityName}}
</div>
<div class='col-sm'>
{{campus.skypeConfNumber}}
</div>
<div class='col-sm'>
<a [attr.href]="'tel:' + campus.skypeConfNumber + conferenceIdStr" (click)='clicked(country.countryName)'>
click here to join
</a>
</div>
</div>
<div class='divider'></div>
</li>
</ul>
</ul>
</div>
</div>
the expected result is the first element should be expanded and the rest should be minimized.
This question already has answers here:
Bootstrap: Collapse other sections when one is expanded
(13 answers)
Closed 6 years ago.
I am trying to find a way to implement bootstrap buttons which will show collapsible content without allowing the content of more than one button to show at any time.
I can get the buttons to trigger collapsible content but I cant find a way to stop them both being un-collapsed at the same time:
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button 1
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
Button 2
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Here is some example text
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-block">
Here is some example text, too
</div>
</div>
js fiddle demo here: https://jsfiddle.net/hzs68sne/
What you want to achieve looks like the collapse accordion.
To do this with your current setup, you can wrap the entire group in a single .panel div and make use of the data-parent attribute.
<div id="container">
<div class="panel">
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" data-parent="#container">
Button 1
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" data-parent="#container">
Button 2
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Here is some example text
</div>
</div>
<div class="collapse" id="collapseExample2">
<div class="card card-block">
Here is some example text, too
</div>
</div>
</div>
</div>
JSFiddle demo: https://jsfiddle.net/gbfb32z9/
Keep in mind:
The .panel div needs to be a direct child of the data-parent element.
The .collapse elements are direct children of a .panel element.
I have several issues laying out a website UI using Twitter's Bootstrap grid.
First off, here is the jsFiddle for my UI mockup.
I've explored the UI layout using Firebug, and things just don't seem correct. I set up a centered div (not using offset*, but actually maintaining centeredness in page regardless of window size by utilizing my centeredDiv class that I defined) which contains all accordion and the white rectangle div where the content will go.
The accordion and the content div are span2 and span8 classes, respectively. So they add up to fill up the space of their parent div, a div of class span10.
The issues are as follows:
The bottom of the background for the accordion and the bottom of the white, content rectangle are not lining up.
The bottom yellow div containing the church information isn't lined up properly with the white content div.
The text within the bottom yellow div isn't centered horizontally. I need it to be.
I really appreciate the help!
JSfiddle for you see it in action
Issue 1 : Accordion background and white background are not lining up because you have set the wrong height for accordion , it has to be height:661px .
Issue2 : It can be resolved by modifying the way you have arranged columns. Use the footer inside the main row and after the content div.
<!--Menu and Content-->
<div class="row" id="rowEntirePage">
<div class="span10 centeredDiv" id="divContentStage">
<div class="row" id="rowContentStage">
<!--Menu-->
<div class="span2 accordion" id="menuAccordion">
<!--MINISTRIES-->
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
href="#collapseOne"> MINISTRIES </a> </div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<ul class="nav nav-pills nav-stacked">
<li class="active">WORSHIP </li>
<li>CHILDREN </li>
<li>YOUTH </li>
<li>WOMEN </li>
<li>DISCIPLESHIP </li>
<li>MEDIA/TECH </li>
</ul>
</div>
</div>
</div>
<!--About Us -->
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
href="#collapseTwo"> ABOUT US </a> </div>
</div>
<!--THE TEAM -->
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
href="#collapseTwo"> THE TEAM </a> </div>
</div>
<!--EVENTS -->
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
href="#collapseTwo"> EVENTS </a> </div>
</div>
<!--SMALL GROUPS-->
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
href="#collapseTwo"> SMALL GROUPS </a> </div>
</div>
<!--MEDIA CENTER-->
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
href="#collapseTwo"> MEDIA CENTER </a> </div>
</div>
<!--BLOG -->
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
href="#collapseTwo"> BLOG </a> </div>
</div>
</div>
<!--Content-->
<div class="span8" id="divContent"></div>
<!--Contact Info-->
<div id="rowContactInfo" class="span8">
<div id="divContactInfo">
<p id="paragraphContactInfo">Church Name / Address / Town, State Zip Code Phone # / <a>Email Us</a> <br>
<a>Maps& Directions</a> </p>
</div>
</div>
</div>
And specifying the following property to the contact div :
#rowContactInfo {
background: linear-gradient(#F4D987, #FFFFFF) repeat scroll 0 0 transparent;
color: #FF0000;
height: 75px;
margin: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
vertical-align: top;
}
Issue 3 : I dont see any issue there . can you show me a picture of how you want it .
Update: Issue 3 : Please write styles and format your footer list properly . As in current representation it is mere text .
Hint : If anything doesnt align when you resize , its probably because you have to write media queries for your custom styles the following way for different resolution :
#media (min-width: 768px) and (max-width: 979px) {
}
#media (max-width: 767px) {
}
#media (max-width: 480px) {
}
Just put your custom styles for a particular section that doesnt look good in the required resolution