We Keep Coding

Keeping an uncollapsed element open if it's parent is clicked on again

First of all apologies for the terrible wording, I'm having trouble describing the issue.
Currently I have a series of buttons in a horizontal row, whereby clicking on a button shows it's associated content underneath, and clicking on a different button collapses the current content and shows the new content (using the 'data-parent' attribute). I want it to function so that for example, if button 3 is clicked and it's content shown, and the user then clicks on button 3 again, instead of the content collapsing I would like it to remain on screen. The way it works currently is that if button 3's content is shown and button 3 is clicked again, the element collapses and we're just left with a row of buttons again. I've experimented with the '.collapse("show")' method but I'm having difficulty implementing it (not even sure if it's possible to work with this method). Here is the associated code:
<div class ="container" id="content">
<button class="btn btn-info" data-toggle="collapse" data-target="#0" data-parent="#content">0</button>
<button class="btn btn-info1" data-toggle="collapse" data-target="#1" data-parent="#content">1</button>
<button class="btn btn-info2" data-toggle="collapse" data-target="#2" data-parent="#content">2</button>
<button class="btn btn-info3" data-toggle="collapse" data-target="#3" data-parent="#content">3</button>
<div class="panel">
<div id="0" class="collapse in">
Button 0's content
</div>
<div id="1" class="collapse">
Button 1's content
</div>
<div id="2" class="collapse">
Button 2's content
</div>
<div id="3" class="collapse">
Button 3's content
</div>
</div>
</div>
Any help would be greatly appreciated.

Dont know if this solution will satisfy you but you can block this like that
for example
$('.btn').click(function(e) {
target = $(this).data('target');
if($(target).is(':visible')){
return false;
}
});
In this situation if you click on "button1" it will collapse the correct div and if you click this again nothing will happen. However clicking another button will collapse another div.

making accordion panel open when clicking on header rather than just title

I found this stackoverflow questions which looks to be the same problem I am having. That is the default behavior is for angular ui-bootstrap accordion to only open when you click on the panel title and not anywhere else on the panel.
ng-click on accordion panel header
The solutions presented seems to get out of sync when one time clicking on the panel and then clicking on the title. Sometimes you have to click twice to get it back in sync. I noticed this snippet on the documentation, To use clickable elements within the accordion, you have override the accordion-group template to use div elements instead of anchor elements, and add cursor: pointer in your CSS.
Can someone provide and example of using div tags instead of anchor elements?

You have to customise the template for accordion-group to use clickable links otherwise it will trigger unexpected routing. You can modify the template as below:
<script id="uib/template/accordion/accordion-group.html" type="text/ng-template">
<div role="tab" id="{{::headingId}}" aria-selected="{{isOpen}}" class="" ng-keypress="toggleOpen($event)">
//this is previously <a role="tab"> - replace it with div
<div role="button" style="border-top:1px solid #e6e6e6" data-toggle="collapse" href aria-expanded="{{isOpen}}" aria-controls="{{::panelId}}"
tabindex="0" ng-click="toggleOpen()" uib-accordion-transclude="heading" ng-disabled="isDisabled"
uib-tabindex-toggle><span uib-accordion-header ng-class="{'text-muted': isDisabled}">{{heading}}</span>
</div>
</div>
<div id="{{::panelId}}" aria-labelledby="{{::headingId}}" aria-hidden="{{!isOpen}}" role="tabpanel"
class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="" ng-transclude></div>
</div>
</script>
You can put this template in your view where you are using accordion. This will override your default accordion-group template that comes from angular ui bootstrap tpls library.

Bootstrap collapse panel doesn't open on ipad

I'm using Bootstrap (3.3.5) with the sb-admin-2 theme. My collapse panels work fine on desktop ( chrome on OsX ) and phone ( Chrome on Android ), but will not open on Ipad ( either chrome or safari ).
Here is the code for one of my panels:
<div class="panel panel-default">
<div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseTwo">
<h4 class="panel-title">Select Columns</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum</div>
</div>
</div>
I saw from this other SO answer, that if I implement the collapse using an <a> tag, and have an href that this fixes the ipad issue. Witchfinder's answer here:
Bootstrap Collapsed Menu Links Not Working on Mobile Devices
Like so:
<h4 class="panel-title">
<a class="panel-heading collapsed" data-toggle="collapse"
data-target="#collapseTwo" href="#collapseTwo">
Select Columns
</a>
</h4>
I tried this and it does fix it. Sort of. But it has some problems:
The entire bar is no longer clickable, just the text. I want the bar.
The href is an anchor link, so when you click it, it updates the address bar, and it causes the page to jump to the panel body. Without the href, the address bar stays the same, and the page does not jump. Much nicer.
I tried the other solution from that question where you edit the code to bootstrap - to remove the ontouchstart but in my case that did not fix it.
Does anyone know how to fix this without the adding the href? Or at least what is going on. Where is the click going?

This might be a trick for The entire bar is no longer clickable, just the text. I want the bar part but just try once:
Cover your entire bar with one more anchor having href="#collapseTwo" and am pretty sure it should target the entire bar now.
<a href="#collapseTwo">
<h4 class="panel-title">
<a class="panel-heading collapsed" data-toggle="collapse"
data-target="#collapseTwo" href="#collapseTwo">
Select Columns
</a>
</h4>
</a>
Regarding url change, I think its inevitable, not sure though.
I found in one more post that setting style="cursor: pointer;" to the element also works. Useful if you're not using an anchor tag! which might solve your url problem

Full Clickable Accordion in Bootstrap

I created a payment page for mobile in php with bootstrap. If visitor click the text the panel is expanding. But if visitor clicks nearby text the panel is not expanding. This is not useful.
How can we transform collapsed panel to full clickable ?

You can manually toggle the accordion with $('#myAccordion').collapse('toggle')
Just set an event handler to watch for clicks on whatever area you want to be clickable, and then toggle the accordion.
For reference: http://getbootstrap.com/javascript/#collapse

You will need to put the "href" attribute on the div element with class "panel-heading", also put there the "data-toggle" attribute. Like This:
<div class="panel-heading invisible" data-toggle="collapse" href="#collapseOne">
<h1 class="panel-title">
Title
</h1>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
</div>
</div>
Hope That Helps, dont forget to put the same ID to the "panel-collapse" element that holds the "panel-body". Good Luck :)

Bootstrap collpase, how to expand and close all the panel togheter

I have a button for collapse and expand all three panel togheter
<button data-toggle="collapse" data-target="#collapseOne-1,#collapseTwo-1,#collapseThree-1" ...></button>
<div id="#collapseOne-1" class="collapse in"></div>
<div id="#collapseTwo-1" class="collapse in"></div>
<div id="#collapseThree-1" class="collapse in"></div>
The problem is that if one of the panel is already collapsed, it will expand,and viceversa.
However, I always want to expand or close all of them together when I click the button.
Do you have any idea of how to do this ?

I use this code to collapse all of the panels at once:
$("#buttonid").click(function(){
$('.collapse').collapse('hide');
});
Basically what the above code does is enable all the elements that have a collapse class to be collapsible and then it hides every one of them.
To show every panel you should use this code:
$("#buttonid").click(function(){
$('.collapse').collapse('show');
});
You should also read this for more information: Bootstrap Doc's