I am struggling getting my accordion to work. When I collapse the first level, the second one comes up as it should, but it then the first level is still visible.
Accordion, not collapsed:
Accordion collapsed:
I've been staring at this for hours. Probably I am missing something stupid here.
<div class='accordion' id='mainAccordion'>
<div class='card'>
<div class='card-header' id='headingOt'>
<h2 class='mb-0'>
<button aria-controls='collapseOt' aria-expanded='true' class='btn btn-link' data-target='#collapseOt' data-toggle='collapse' type='button'>
<h2>Header</h2>
</button>
<div aria-labelledby='headingOt' class='collapse show' data-parent='#mainAccordion' id='collapseOt'>
<div class='card-body'>
dummy text
</div>
</div>
</h2>
</div>
</div>
<div class='card'>
<div class='card-header' id='heading-nt'>
<h2 class='mb-0'>
<button aria-controls='collapseNt' aria-expanded='false' class='btn btn-link' data-target='#collapseNt' data-toggle='collapse' type='button'>
<h2>header</h2>
</button>
<div aria-labelledby='headingNt' class='collapse show' data-parent='#mainAccordion' id='collapseNt'>
<div class='card-body'>
dummy text
</div>
</div>
</h2>
</div>
</div>
</div>
------------------ Addition, 5 feb 2019 ------------
Attached a little gif that shows what happens. It seems that the accordion works well, it collapses the text below, the second header shifts up, but then the first text pops up again.
Related
I can't figure out how I can align text next to each other inside a column. What I tried is:
<div className="row">
<div className="col-md-3 property">
<div className="card shadow">
<img className="card-img-top" alt="Image 1" src={("./Components/Images/slide-image1.jpg")}></img>
<div className="card-body">
<h5 className="card-title">Info</h5>
<div className="row">
<div className="col-md-6">
<h3>$ 500</h3>
</div>
<div className="col-md-3">
<span className="badge badge-warning">Villa</span>
</div>
<div className="col-md-3">
<button className="btn btn-details btn-sm text">View Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
It is a nested row but I cant get it working.
How can I align $ 500 villa button next to each other?
You don't need those extra columns. Just put all the text inside your row and put float: left on the elements.
you can add this style
style="text-align:center;"
A button is created for each question from the database, when clicked, only one answer should be opened. But instead, when you click on any of the buttons, all answers open.
So far I've tried to change "collapse" to "${question.id}", but it seems to me that it doesn't work this way.
<div class="card-columns">
<#list questions as question>
<div class="card border-light mb-3 bg-card">
<div class="m-2">
<p>
<button class="btn btn-info" type="button"
data-toggle="collapse"
data-target="#collapse"
aria-expanded="false"
aria-controls="collapse">
${question.question}
</button>
</p>
</div>
<div class="m-2">
<div class="collapse" id="collapse">
<div class="card card-body border-info">
${question.answer}
</div>
</div>
</div>
<#else>
There is no questions.
</#list>
</div>
</div>
You need to change "collapse" to $question.id in 2 line:
<button ... data-target="#collapse"
and
<div ... id="collapse">(id not class).
I dont familiar with freemarker, so cant provide full fix.
While everything is working fine in Chrome and Firefox, I am having issues in IE displaying correctly the outline focus around the content of some anchor elements.
As you can see in the picture the focus outline is outside the box, in a collapsed status (it looks like a dotted line) and not around it like in the other browsers.
That part of my HTML:
<section class='section'>
<div class='container'>
<div class='row mb-lg'>
<header class='col-md-8 col-md-offset-2 text-center'>
<h2 class='heading-with-bullet'>
Box Tests
</h2>
</header>
</div>
<div class='row'>
<div class='col-sm-4'>
<a href='/tests/test1'>
<div class='test-box'>
<div>
Test1
</div>
</div>
</a>
</div>
<div class='col-sm-4'>
<a href='/tests/test2'>
<div class='test-box'>
<div>
Test2
</div>
</div>
</a>
</div>
<div class='col-sm-4'>
<a href='/tests/test3'>
<div class='test-box'>
<div>
Test3
</div>
</div>
</a>
</div>
</div>
</div>
</section>
Any idea about on how I could have the focus outline work as expected?
I've only been able to find suggestions on how to remove the outline altogether, which is not ideal for accessibility reasons.
I have a footer that is set up as follows:
<hr>
<footer>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-primary" onclick="window.location.href='Glossary.html'">Glossary</button>
<button type="button" class="btn btn-primary" onclick="window.location.href='Bibliography.html'">Bibliography</button>
<button type="button" class="btn btn-primary" onclick="window.location.href='For_Help.html'">Where To Go For Help</button>
</div>
<div class="col-md-6 col-md-offset-6" style="padding-top: 5px">
<div class="panel panel-default">
<div class="panel-body col-xl-1">
<p> For questions or concerns regarding this webpage, contact: <strong>checkeredflags#gmail.com</strong></p>
<p>© 2017 Checkered Flags</p>
</div>
</div>
</div>
</div>
</footer>
How could I set it up such that the buttons are on the left, and the 2 paragraph tags are aligned with the buttons, however pulled to the right side of the screen? Currently the div with the paragraphs sits underneath the buttons. Ideally they would only go underneath when the screen size was small enough
Try This
<div class="panel-body col-xl-1">
<div class="pull-right">
<p> For questions or concerns regarding this webpage, contact:
<strong>checkeredflags#gmail.com</strong></p>
<p>© 2017 Checkered Flags</p>
</div>
</div>
Looks like the col-md-offset-6 class is pushing it down as well as the padding-top: 5px;.
See: https://codepen.io/anon/pen/ZJaJwe
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.