I have a bootstrap accordion on a page (we will call it page 2). From a different .aspx page (page 1) I have a list of links that I want to, when clicked on, have the link toggle the accordion so that it opens that accordion drop down once page 2 loads. However I've noticed that the data-toggle="collapse" prevents me from making this work, and yet I need that on my list of links to get it working. any other way to code this?
It looks like the data-toggle="collapse" only works if the links are on the same page. How would I get it to work if it was on a different page?
var anchor = window.location.hash.replace("#", "");
$(".collapse").collapse('hide');
$("#" + anchor).collapse('show');
<!--BEGIN On page 1-->
<ul>
<li>Test 1</li>
</ul>
<!--END On page 1-->
<!--BEGIN On page 2-->
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a id="group-1" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<i class="more-less glyphicon"></i>
Group 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
sdfsdffsdfsdfsdf
</div>
</div>
</div>
<!--END On page 2-->
Related
I'm using Bootstrap accordion to create a step-by-step process where the user in the first accordion has two options. If the first option is chosen, the first accordion should collapse and the second should open. If the second option is chosen, the first should collapse and the third should open. For this I'm using onclick events for the buttons and the collapse method.
Currently using the code from the Bootstrap accordion example as in the link above.
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<button id="btnOne" class="btn btn-default col-xs-12">
First option
</button>
<button id="btnTwo" class="btn btn-default col-xs-12">
Second option
</button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Second panel
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Third panel
</div>
</div>
</div>
</div>
I added click events for the buttons, as below, to show and hide the collapsibles.
$('#btnOne').on('click', function() {
$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('show');
});
$('#btnTwo').on('click', function() {
$('#collapseOne').collapse('hide');
$('#collapseThree').collapse('show');
});
Now to the problem: Before clicking any of the buttons the default accordion functionality (from using the attributes on the html element), (e.g. clicking the title of one accordion opens it and closes others) but there seems to be a problem when using the javascript methods in combination with the functionality using the attributes.
Example 1: If I open the second accordion, without pressing the button in the first accordion, and then opens the first accordion to press the "First option" button to open the second accordion it is not opened. The javascript $('#collapseTwo').collapse('show') does not seem to be triggered.
Example 2: If I instead click on the first option directly, after the page has loaded, the second accordion opens properly. Now the problem instead is when opening the first accordion by clicking the header it won't collapse the second accordion.
Is it possible to use the javascript methods in combination with the data-toggle="collapse" and the other attributes and benefit from the functionality of both?
Or, do I need to manually (by triggering the javascript methods) show and collapse the accordions, to get rid of the problem?
Here's a fiddle to try it out.
After some research, the simplest solution is to collapse all open collapsibles in the panel-group using the show.bs.collapse event exposed by Bootstrap's collapse class.
$('.collapse').on('show.bs.collapse', function () {
$('#accordion').find('.collapse.in').collapse('hide');
});
I have a single accordion item that I am using for a read more / less link on a page.
The purpose of this is to click it to read more, and a few paragraphs will follow.
I have this working, but I need it to stay closed when the page loads, at the moment the page loads with the item open.
What can I add to fix this?
<div class="accordionMod panel-group">
<div class="accordion-item">
<h4 class="accordion-toggle">Read More / Less</h4>
<section class="accordion-inner panel-body">
<p>more info.</p>
<h4 class="title">More titles</h4>
<p>more content</p>
</section>
</div>
</div>
I think this will work
<div class="accordion" id="myAccordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Content
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#myAccordion" href="#collapseTwo">
Title
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Content
</div>
</div>
</div>
</div>
if you add the class in to accordion-body collapse it will be open by default.
Sounds like you don't need an accordion, which has multiple panels, only one of which can open at a time. Instead, just use collapse which allows you to toggle the visibility of a section of the page.
Panel Visibility
From the collapse docs:
The collapse plugin utilizes a few classes to handle the heavy lifting:
.collapse hides the content
.collapse.in shows the content
.collapsing is added when the transition starts, and removed when it finishes
Thus, to start off collapsed, just make sure your extra content has the class collapse and not in
Simple HTML
To use collapse, you really just need to specify a data-toggle="collapse" and then point the collapse to the css selector of the section you would like to toggle using data-target.
Here's a bare bones example that just exposes the collapsing functionality:
<a data-toggle="collapse" data-target="#ReadMoreInfo" href="#">
Read More / Less
</a>
<div id="ReadMoreInfo" class="collapse">
<p> More Info Here </p>
</div>
HTML with Bootstrap classes
All the other bootstrap classes are just to help make the collapsible panel look like a collapsible panel. I would recommend formatting them like this or doing a lot of custom CSS work. Even if you wanted to do the CSS yourself, starting off with this template and then overriding the styles would be best.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse"
data-target="#ReadMoreInfo"
href="#ReadMoreInfo">
Read More / Less
</a>
</h4>
</div>
<div id="ReadMoreInfo" class="panel-collapse collapse">
<div class="panel-body">
<p>more info.</p>
<h4 class="title">More titles</h4>
<p>more content</p>
</div>
</div>
</div>
Working Demo in jsFiddle
Screenshot:
Removing the in class did not work for me in my case(though normally it should). I was just looking for the answer to this question yesterday. I used this to make the accordion default to close:
$( document ).ready(function() {
$('.collapse').collapse({
toggle: false
});
});
See also this question on:
Jquery accordion not collapse by default
if accordion is with icon, add collapsed class name to :
<a class="accordion-toggle accordion-toggle-styled collapsed" >
and add collapse class name to:
<div id="collapse0" class="panel-collaps collapse">
complete code is:
<div class="panel-group accordion" id="accordion0">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle accordion-toggle-styled collapsed" data-toggle="collapse" data-parent="#accordion0" href="#collapse0">
Collapsible Header Text
</a>
</h4>
</div>
<div id="collapse_3_1" class="panel-collaps collapse">
<div class="panel-body">
<p> body text
</p>
</div>
</div>
</div>
</div>
It's easy. In Bootstrap 5, edit your HTML to remove the "show" class from your first accordion item. See Make accordion closed by default in Bootstrap, the answer that starts "Was recently working with Bootstrap".
I am building a website using the bootstrap framework and having some problems with the collapse component. I just switched over to Bootstrap version 3 from an older version. In the older version the collapse worked fine in all browsers. However, now after linking to the new version of bootstrap css and javascript and updating the html tags, it is not working entirely correct. In chrome, all of the collapsed blocks work except for three of them. When I click on them nothing happens. If I force these to open when the page opens (by adding the collapse.in) then they do but when i close them and then try to open them again they will not. I have 5 separate sets of accordions and in each of the three cases where they do not work it is the last one in the set. I have compared the code of these to the rest of my code as well as to the code on the bootstrap examples and I can't seem to find any syntax errors on my part. Here is some of the code:
<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">
Mid Shore Business and Technology Park
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
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">
Dorchester Technology Park
</a>
</h4>
</div>
<div id="collapsetwo" class="panel-collapse collapse">
<div class="panel-body">
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="#collapsesix">
Mistletoe Farm Project
</a>
</h4>
</div>
<div id="collapsesix" class="panel-collapse collapse">
<div class="panel-body">
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="#collapsenine">
Cambridge Waterfront: SAILWINDS PARK
</a>
</h4>
</div>
<div id="collapsenine" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
</div>
</div>
On a slightly unrelated note, none of them work in IE. Thanks in advance!
I am using bootstrap collapse element. When I expand one accordian group, the other closes. What should do If i dont want the other accordian to close when one if clicked?
<div class='accordion-group'>" + "<div class='accordion-heading' style='font-size:15px;'>" + "<a class='accordion-toggle collapsed' data-toggle='collapse' data-parent='#accordion1' href="#collapse1">
Thanks in advance :)
Below is from the bootstrap website on how to do this.
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.
Here is example code.
The big difference, is adding data-target="#collapseOne" instead of data-parent="#accordion".
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-target="#collapseOne" href="#">
Item #1
</a>
</div>
<div id="collapseOne" class=" collapse in">
<div class="accordion-inner">
Anim pariatur cliche reprehenderit
</div>
</div>
</div>
This works:
<div class='accordion-group'><div class='accordion-heading' style='font-size:15px;'><a class='accordion-toggle' data-toggle='collapse' data-target="#collapse1" href='#collapse1'>
TEXT
</a></div>
<div id="collapse1" class="accordion-body collapse" style="height: 0px "><div class="accordion-inner">
TEXT_INNER
</div></div></div>
I'm trying to use the collapse components of Bootstrap.
It works well but I noticed that sometimes it doesn't close all the other elements; when I click in order from the first to the third and then back to the first again, the third one remains open.
My markup is the same as the example code that Bootstrap provides, because I'm just testing for now.
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Part 1
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Part 2
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Collapsible Group Item #3
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Part 3
</div>
</div>
</div>
The JavaScript code is this:
$(".collapse").collapse("#accordion2");
Considering that I'm thinking to use this components in a menu, in order to show a group open according to a PHP variable value do I just have to print the class in to the div collapseOne/collapseTwo and so on?
You do not need the javascript part, in fact - remove it!! It is that code precisely that causes the strange behaviour - accordion2 is initialized twice resulting in a double set of "logic". Your problem is fully reproduceable by using either the javascript or not.
Generally, regarding twitter bootstrap, when you can place all your data and binding-functionality in data attributes, as you have done here, you'll never have to do javascript. TB does the job automatically when the page is loading, by looking for those data attributes.
Consider javascript as a second option, an alternate way, when you cant do what you want by simply adressing the data attributes.
If you made your markup according to bootstrap collapse docs you can achieve this with the following jQuery code:
$(document).on('click', '.accordion-toggle', function(e) {
event.preventDefault();
$('#accordion2').find('.accordion-body').collapse('hide');
$(this).parent().next().collapse('show');
});