Twitter Bootstrap 3 - Auto Expand An Accordion When A Link Clicked In Another Accordion
Solution 1:
If you're inclined to use jQuery for this, you could do the following:
$('#SubTitle2').click(function(){
$('#collapseTwo').collapse('show');
});
...having the anchor setup something like this:
<a href="#" id="SubTitle2" data-target="#collapseTwo">Test</a>
You can test it out here: http://www.bootply.com/jQMOup05vG
Solution 2:
by using data-target you can achieve this as
<a data-toggle="collapse" data-target="#id_to_expand">click</a>
hope this will help you
Solution 3:
Managed to get it working by mixing the answers from Nasir Mahmood and webeno.
Basically I mixed and matched both solutions and it works. My code is now:
<p><a class="collapsed"
href="#SubTitle2"
data-toggle="collapse"
data-target="#collapseTwo">Test
</a></p>
As you are not able to mark responses as answer I will add a comment on them both
Solution 4:
None of the answers submitted previously are acceptable for my situation. I don't know ahead of time which links exist on the page, and which links will necessitate expanding collapsed sections. I also have nested collapsible sections. Also, I want the expansion to occur if someone links into the page from another document. So I settled on a solution that detects dynamically what sections must be opened. When a click on a link I care about happens, the handler:
Finds all parents of the target which are collapsed sections. (
$(target).parents(".collapse:not(.in)").toArray().reverse();
)Starting with the outermost parent, it requests that the element be expanded. (These are the calls to
next()
. The call$parent.collapse('show');
is what shows a parent.)Once an element is expanded, it expands the next parent (closer to the link target). (
if (parents.length)...
)Until finally it requests that the target be scrolled into view. (
target.scrollIntoView(true);
)
I've initially tried walking the DOM tree in the reverse order, from innermost parent to outermost, but I got strange results. Even compensating for event bubbling, the results were inconsistent. The request for scrolling to the target is necessary as it is likely that the browser will have scrolled the window before the sections are expanded.
Here's the code. win
and doc
are set to the Window
and Document
instance that actually hold the DOM tree being processed. Since frames may be used, just referring to window
and document
ain't okay. The root
variable is an Element
that holds the part of the DOM I care about.
function showTarget() {
var hash = win.location.hash;
if (!hash)
return;
var target = doc.getElementById(hash.slice(1));
if (!target)
return;
var parents =
$(target).parents(".collapse:not(.in)").toArray().reverse();
function next(parent) {
var $parent = $(parent);
$parent.one('shown.bs.collapse', function () {
if (parents.length) {
next(parents.shift());
return;
}
target.scrollIntoView(true);
});
$parent.collapse('show');
}
next(parents.shift());
}
win.addEventListener('popstate', showTarget);
$(root).on('click', 'a[href]:not([data-toggle], [href="#"])',
function (ev) {
setTimeout(showTarget, 0);
});
showTarget();
Notes:
The selector
a[href]:not([data-toggle], [href="#"])
limits event listening only to thosea
elements that are actually hyperlinks into the rest of the document. Sometimesa
is used for other purposes. For instance, thosea
elements that have adata-toggle
attribute or havehref="#"
are not used for navigating through the page.setTimeout(showTarget, 0)
allows the default action for a click on a hyperlink to happen (i.e. the hash changes) first, and thenshowTarget
is called. This works everywhere except FF. A few tests show thatshowTarget
won't see the change on FF unless the timeout is raised. 0ms does not work, 1ms did not, and 10ms works. At any rate, I'd rather not hardcode some FF-specific value that may change in the future so we also listen on popstate` to catch those cases that would not be caught on FF.The explicit call to
showTarget()
is necessary for cases when the page is loaded with a URL that has a hash.I've tried an implementation that listened only on
popstate
but it proved unreliable due to how Chrome and FF differ in how they generatepopstate
. (Chrome generates it whenever a link is clicked, even if the hash does not change. FF generates it only when the hash changes.)The code above has been tested in Chrome (39, 38, 36), FF (31), and IE (10, 11).
Solution 5:
you have set panel-group id=accordion twice. Thats not good. Wrap your two panels into one panel-group-block with one id:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle collapsed" data-parent="#accordion" href="#collapseOne" data-toggle="collapse">Heading 1</a>
</h3>
</div>
<div class="panel-collapse collapse" id="collapseOne">
<div class="panel-body">
<p><a href="#SubTitle2">Test</a></p>
</div>
</div>
</div>
<!-- SNIP
</div>
<div class="panel-group" id="accordion">
SNAP -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle collapsed" data-parent="#accordion" href="#collapseTwo" data-toggle="collapse">Heading 2</a>
</h3>
</div>
<div class="panel-collapse collapse" id="collapseTwo">
<div class="panel-body">
<p id="SubTitle2">Content</p>
</div>
</div>
</div>
</div>
Post a Comment for "Twitter Bootstrap 3 - Auto Expand An Accordion When A Link Clicked In Another Accordion"