So I am making a website as my wishlist this year. Every wish has a collapsible menu (made with Bootstrap collapse) and something is not right.
Problem illustrated in picture:
As you can see, it is like the collapsible element is overlaying or a part of the next panel that should trigger the next collapsible element.
I have looked for bugs in my code multiple times and I really can't figure out why it is doing this.
So the
<div id="collapseOne" class="collapse">
is overlaying the
<a class="panel-link" role="button" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<div class="panel panel-default">
<div class="panel-body">
All of my code is in a Codepen here.
My website is in Danish :)
1) First of all, you need to fix the hierarchy of HTML-tags. Which tag should be within another?
<a class="panel-link" ...>
<div class="panel panel-default">
<div class="panel-body">
...
</a>
...
<a class="#" ...>
...
</div>
</div>
</a>
2) Bootstrap's grid system involves one more hierarchy of blocks: the container contains rows and rows contain columns. So you need to wrap columns into rows.
See demo on CodePen.
Related
I did my research on this and noted that there are 2 topics similar to this.
Bootstrap's tabs with data-toggle cause reload in angularjs
and
Using bootstrap collapse with angularjs
Both mentioned to replace href tag with data-target
So I did an attempt
BEFORE
<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">
<div class="panel-body">
This is a simple accordion inner content...
</div>
</div>
</div>
</div>
AFTER
<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" **data-target**="#collapseOne">
Collapsible Group #1
</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
This is a simple accordion inner content...
</div>
</div>
</div>
</div>
And now while there is no more redirect, it doesn't expand the accordion.
I understand that there is an AngularJS Accordion I can use, but I have a UI developer that does not know AngularJS and will give us codes in the above format, therefore, I want to bridge that gap whereby he gives us a piece of HTML that doesn't work as expected.
I noted that one of the comment mentioned.
The above solution (also exactly the same in Bootstrap documentation) only works when not using Angular, at least for certain versions. I am assuming this is why the Angular folks created this library Angular UI Bootstrap as a workaround to these sorts of conflicts. Haven't investigated it fully to understand exactly the conflict, but this article sheds some light on possibly related conflicts due to jQuery. – michaelok Jan 8 '16 at 17:28
What does when not using Angular means exactly in this case?
I'm using a Bootstrap accordion and it works like a charm, no problem at all. However, I'd like to have a link to one of the tabs in the accordion. The idea is that once I click on the link, I'm taken to that part of teh page (the accordion is really down in the page) and open the tab.
So I used the following:
<i class="mdi-action-info"></i>
which should work. And it does in part: it opens the accordion tab just right, however, the page doesn't scroll to the anchor as it should. It just stays in the same position, but opening the accordion.
Any idea how to fix it? I have found answers related to jQuery UI accordion but nothing about BS accordion (and the jQuery UI answers didn't work either), really don't know why isn't this working
In order to scroll to the anchor, you should wait until your collapsable div is fully shown.
JQuery helps us to easily work out with that by collapse events.
$(document).ready(function() {
$("#section-two").on('shown.bs.collapse', function() {
window.location = "#section-two";
});
});
Check out Bootstrap JS Collapse Reference on w3schools.com for a quick documentation.
You can do it manually like so:
Open group 2
JS
$('#my-link').click(function(e) {
$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('show');
});
Fiddle
In my case I prefer to avoid adding JavaScript and decide to use two attributes (data-target and href) so that each of them has one job: 1)launch tab & 2)go to anchor:
<a data-toggle="collapse" data-parent="#accordion" data-target="#$foo" href="#$foo">
Building off of Michele's answer, here is an example where you can do an animated scroll to the div:
$(document).ready(function() {
$('#accordionEvent').on('shown.bs.collapse', function() {
var position = $('#accordionEvent').offset().top;
$('HTML, BODY').animate({scrollTop: position }, 500); //500 specifies the speed
});
});
Here is a working version that doesn't just force open an according but actually toggles it like you would expect. It will also scroll to the page anchor. Best of all it's dynamic so you don't need to manually code a bunch of functions for each according group.
Your webpage will look something like this:
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading accordian-button">
<h4 class="panel-title">
Section One
</h4>
</div>
<div class="accordian-body panel-collapse collapse in">
<div class="panel-body">
Section One Text
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordian-button">
<h4 class="panel-title">
Section Two
</h4>
</div>
<div class="accordian-body panel-collapse collapse in">
<div class="panel-body">
Section Two Text
</div>
</div>
</div>
</div>
<div>
Now for the code:
$(".accordian-button").click(function(e) {
that = $(this)
accordian = that.siblings('.accordian-body')
$(".accordian-body").not(accordian).collapse('hide')
accordian.collapse('toggle')
})
// Kludge for allowing all accordians to be collapsed to start
$(".accordian-body").collapse('hide')
Here's a working fiddle:
http://jsfiddle.net/dkcb8jLq/31/
Notice you can just click on the div to toggle it or you can click on the text to toggle and go to the link.
Bootstrap normally closes other collapses when you click on one to open it.
Is there an option or hack to make it keep the collapses open unless explicitly closed without changing the look and layout of the panel-group?
Update 2020
Bootstrap 4
How do you make Twitter Bootstrap Accordion keep one group open?
Bootstrap 3
You can just remove the data-parent attribute that is normally used in the accordion markup.
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
...
http://bootply.com/127843
See this demo:
http://plnkr.co/edit/OxbVII?p=preview
Idea:
Just add data-toggle="collapse" and a data-target to element, to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
2021 here:
Assuming that you're using Bootstrap 4, you can simply remove the data-parent attribute from the element with the collapse class.
Bootstrap docs:
https://getbootstrap.com/docs/4.6/components/collapse/#accordion-example
They use the following collapse element:
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
This subscribes the collapse to events on #accordionExample, which is the main accordion element, via the data-parent attribute. Remove data-parent, and the collapse will no longer close when another one is expanded.
Bootstrap 4
NO NEED JAVASCRIPT
can implements many div of id #accordion{{$i}} each accordion only having 1 child that referring 1 its parent
<div class=""
id="accordion{{$i}}">
<h3 class="" data-toggle="collapse"
data-target="#collapse{{$i}}"
aria-expanded="true"
aria-controls="collapse{{$i}}" class="mb-0">
Hai Im the clickable
</h3>
<div id="collapse{{$i}}"
class="collapse"
aria-labelledby="heading{{$i}}"
data-parent="#accordion{{$i}}">
<p>Hai Im the collapsible content</p>
</div>
</div>
basically want to toggle the visibility of a separate element by linking up with the toggling of a bootstrap-collapsed heading. in the case below, the clicking of "#producer" will expand/collapse "#collapseOne". i want that same function to make ".cv" appear and disappear too. i don't want other headings to affected, though, so it should be specific to just clicking "#producer".
markup:
<div class="panel-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" id="producer">Producer Reel <em>For Hire!</em>
</a>
<a class="cv" href="#">
<i class="icon-file-text-alt"></i>my CV
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">...</div>
any help would be appreciated!
$('.accordion-toggle').click(function(){
$(this).next('.cv').collapse('toggle');
});
I have a number of dynamically generated bootstrap accordions nested in tabs. It's all bootstrap. I have one accordion panel defaulting to open but once i click anywhere it closes and no others will open.
I'm using the code right out off the example but filling in dynamica elements. I've checked all the other possibilities on here -making sure my data-target and/or href match the id of the accordion-body and it's all good. Someone suggested using data-target instead of just href, but that didn't help. Each accordion has a unique name and the calls to data-parent are correct. Here's the source code that generated what I copied over to jsfiddle:
<div class="tab-pane active" id="institutional">
<div class="accordion" id="accordion2">
{foreach name=loop from=$institutional item=film}
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#{$film->url_key|escape}" href="#{$film->url_key|escape}">
{$film->title()|escape} -
{$film->title_suffix()|escape}
</a>
</div><!-- /accordion-heading -->
<div id="{$film->url_key|escape}" class="accordion-body collapse {if $smarty.foreach.loop.first} in{/if}">
<div class="accordion-inner">
http://jsfiddle.net/dylanglockler/7qy8g/1/
----------UPDATE ------- figured it out but can't answer my own question because I don't 'have enough experience points' - didn't realize this is a game.
I figured it out.. the id of my accordion content and the related data-target and href that pointed to it, were based off of film titles which are unique, but repeated within each accordion, albeit on separate tabs. Of course this made for non-unique ids.
My fix is below, I added an _n (ie, _1) after the generated id for each of the three accordions:
<div class="accordion" id="accordion1">
{foreach name=loop from=$home item=film}
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" data-target="#{$film->url_key|escape}_1" href="#{$film->url_key|escape}_1">{$film->title()|escape} - {$film->title_suffix()|escape}</a>
</div><!-- /accordion-heading -->
<div id="{$film->url_key|escape}_1" class="accordion-body collapse {if $smarty.foreach.loop.first} in{/if}">
The problem seems to be having the accordion inside the tab content.
When it's removed from the tab-pane it works fine: http://jsfiddle.net/skelly/7qy8g/2/