I'm trying to use bootstrap to have a collapsible panel.
Here's my html:
<div class="col-xs-12 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">Amérique du nord/North America <span data-toggle="collapse" target-target="#panelBodyOne" class="collapsed">+</span></div>
<div id="panelBodyOne" class="panel-body collapse"> Test</div>
</div>
</div>
Can anyone tell me why this isn't working?
You have your target attribute named as target-target but it should be data-target.
<span data-toggle="collapse" data-target="#panelBodyOne" class="collapsed">+</span>
Add data-target attribute on your span Tag
try this code
<div class="col-xs-12 col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">Amérique du nord/North America
<span data-toggle="collapse" data-target="#panelBodyOne"
class="collapsed">+</span>
</div>
<div id="panelBodyOne" class="panel-body collapse">Test</div>
</div>
</div>
Related
I have a sidebar on the right that uses 3 elements of a bootstrap grid. I am trying to have the content always to the right of this sidebar (so they must always take up 9). I currently have an accordion and an h2, however I am having a difficult time left-aligning them with the rest of the content on the page. The sidebar is coded as follows:
<div class="col-md-3">
<div class="list-group">
example
</div>
</div>
Each "content div" is as follows (these are aligning properly)
<div class="col-md-9 pull-right">
<div class="panel panel-default">
<div class="panel-heading">
<h4>title</h4>
</div>
<div class="panel-body">
<p>content</p>
</div>
</div>
</div>
This is the h2 and accordion that isn't properly aligning with the content.
<div class="col-md-9 pull-right">
<div class="row">
<div class="col-md-12">
<h2 class="page-header col-md-9 pull-left">Action Strategies: What We Can Do Now</h2>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading together">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">What We Can Do Together</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>list</li>
</ul>
</div>
</div>
</div>
Image to help visualize the problem
without pull-right
Remove the pull-right from the classes list:
<div class="col-md-9 pull-right">
<!-------------------^^^^^^^^^^ This is the culprit to pull it to the right.
The pull-right class just adds float: right !important; to the styles, which make the content to be pushed right.
Hello i wanted to implement a collapsible pannels into my website if you are not sure what do i talk about i use this code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Panel 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">text here</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Panel 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">text here</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
now the problem is that , whenever i try to add more of them and lets say i have like 3 of these codes on my site then whenever i click at any of these pannels header it only opens the first i understand whats wrong with it , its because it triggers a div when you click the panel header and if the div ids are the same in every of these group then clicking on it will apply the change to the first group so then i renamed
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Panel 1</a>
to
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1B">Panel 1</a>
and also
to
<div id="collapse1B" class="panel-collapse collapse">
and now whenever i click at any of them the changes will only aply to the one it should but , as you can see if you click at panel option 1 the option 2 will slide back , and this feature doesnot work anymore if i do what i described above can anyone tell me how to use multiple collapsible group on my site without loosing the feature to slide back when you choose the second option ? thanks
Just delete id="accordion" and data-parent="accordion":
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Panel 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">text here</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Panel 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">text here</div>
</div>
</div>
</div>
</div>
</div>
The data-parent attribute specifies a collection of elements to collapse when triggered. I think of it like a Radio Group: only one can be selected.
As #makshh said, if you remove that it will work. You only need to use that attribute if you wish to have multiple collapsibles linked.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Panel 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">text here</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse2">Panel 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">text here</div>
</div>
</div>
</div>
</div>
I've copied the examples here and here to display an accordion using Bootstrap, but the different elements in my accordion won't appear separately from each other. Here's what my code produces for a two element accordion and what it looks like:
Here's what it's supposed to look like:
Here's my html which is just like the two sites I linked above:
<div class="panel-group" id="accordion">
<div id="reports-accordion">
<div class='panel panel-default'>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Acquisitions</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Panel body
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Circulation</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Panel body
</div>
</div>
</div>
</div>
</div>
This is the css and js I'm including:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
How do I get the division and spacing between elements in my accordion to display correctly? Thank you.
You Need to modify your structure try this code
<div class="panel-group" id="accordion">
<div id="reports-accordion">
<div class='panel panel-default'>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Acquisitions</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Panel body
</div>
</div>
</div>
<div class='panel panel-default'>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Circulation</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Panel body
</div>
</div>
</div>
</div>
</div>
Even you can try on your existing structure I think you are missing margin-top property
.panel-heading {
margin-top: 5px;
}
Try adding this code and if possible please share your code in fiddle
How I can nested one panel in div?
Problem is when this panel nested in div is open then cannot close when I open other panel. I need this because I am going to hide few panel. The div which panels are nested I want to set on display: none.
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">Panel 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">Panel 2</div>
</div>
</div>
<div class="divWhichIWantHide">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion1" href="#collapseThree">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">Panel 3</div>
</div>
</div>
</div>
SAMPLE
When wrapping a div to another div, ask yourself : in what this particular div is special ? Can this div be avoided ?
In general, when you add a div to wrap another div, lets say this :
<div class="div1">
<div class="div2"></div>
</div>
You can merge the "class" to themselves, like you must have seen with Bootstrap components :
<div class="div1 div2"></div>
Doing that, you just have to be sure properties of div1 will not alter effect of css for class div2.
here is your fixed project : Editable Bootply sample
I am trying to place two nested accordions within the same row so that they appear side-by-side both taking up half the space of the parent accordion.
html:
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
Collapsible Group #1
</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">This is a simple accordion inner content...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
Collapsible Group #2 (With nested accordion inside)
</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<!-- Here we insert another nested accordion -->
<div class="row">
<div class="col-md-3">
<div class="panel-group sub-panel" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
Collapsible Inner Group Item #1
</a></h4>
</div>
<div id="collapseInnerOne" class="panel-collapse collapse in">
<div class="panel-body">Anim pariatur cliche...</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel-group" id="accordion3">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion3" href="#collapseInnerTwo">
Collapsible Inner Group Item #2
</a></h4>
</div>
<div id="collapseInnerTwo" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche...</div>
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
</div>
css:
.panel-heading {
background: #00BFFF !important;
text-align: center;
}
#accordion3 {
float: right;
}
.sub-panel {
display: inline;
}
here is a link to a JS fiddle: http://jsfiddle.net/tdcqgo4k/
Ive tried using .row .row-fluid with .span* as well as trying to use col-- classes. please help!
Remove float from your CSS for the third accordian, and change your column definitions to both use col-xs-6 for the column parents of the nested accordians
Demo Fiddle
HTML
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
Collapsible Group #1
</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">This is a simple accordion inner content...</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
Collapsible Group #2 (With nested accordion inside)
</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<!-- Here we insert another nested accordion -->
<div class="row">
<div class="col-xs-6">
<div class="panel-group sub-panel" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
Collapsible Inner Group Item #1
</a></h4>
</div>
<div id="collapseInnerOne" class="panel-collapse collapse in">
<div class="panel-body">Anim pariatur cliche...</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel-group" id="accordion3">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion3" href="#collapseInnerTwo">
Collapsible Inner Group Item #2
</a></h4>
</div>
<div id="collapseInnerTwo" class="panel-collapse collapse">
<div class="panel-body">Anim pariatur cliche...</div>
</div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
</div>
</div>
</div>
</div>
CSS
.panel-heading {
background: #00BFFF !important;
text-align: center;
}