I have implemented the following Bootstrap accordion/collapsible form on my website. Please see this fiddle: https://jsfiddle.net/eswv56ha/
Here's my HTML markup too:
<div class="panel-group" id="checkout-accordion">
<div class="panel panel-default checkout-panel" id="panel-billing">
<div class="panel-heading checkout-heading" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-billing">
<h4 class="panel-title checkout-acc-title"> <a class="accordion-checkout" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-billing">Delivery Address <i class="checkout-accordion-icon"></i></a> </h4>
</div>
<div id="collapse-billing" class="panel-collapse details collapse in">
<div class="panel-body checkout-inside">
Content First
<button id="toggle-delivery" type="button" class="btn-checkout" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-delivery">Deliver to This Address</button>
</div>
</div>
</div>
<div class="panel panel-default checkout-panel" id="panel-shipping">
<div class="panel-heading checkout-heading" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-delivery">
<h4 class="panel-title checkout-acc-title"> <a class="accordion-checkout collapsed" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-delivery">Delivery Options <i class="checkout-accordion-icon"></i></a> </h4>
</div>
<div id="collapse-delivery" class="panel-collapse details collapse">
<div class="panel-body checkout-inside">
Content Second
<button id="toggle-payment" type="button" class="btn-checkout" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-payment">Select Delivery Option</button>
</div>
</div>
</div>
<div class="panel panel-default checkout-panel" id="panel-payment">
<div class="panel-heading checkout-heading" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-payment">
<h4 class="panel-title checkout-acc-title"> <a class="accordion-checkout collapsed" data-toggle="collapse" data-parent="#checkout-accordion" href="#collapse-payment">Payment <i class="checkout-accordion-icon"></i></a> </h4>
</div>
<div id="collapse-payment" class="panel-collapse details collapse">
<div class="panel-body checkout-inside">
Content Third
</div>
</div>
</div>
<div>
</div>
I used dummy content for the panel body as the content is generated dynamically with PHP. The accordion replaces the checkout form on my WooCommerce website. So far, it is fully functional and behaves as expected, however, I'd like to go one step further and somehow disable the second and third panels (Delivery Options & Payment) when the first one (Delivery Address) is toggled. Then, when the user clicks "Deliver to This Address" button, the second panel would be enabled. At this point, the first panel (Delivery Address) will be collapsed BUT still enabled/toggleable, the second one (Delivery Options) will be toggled, and the third one (Payment) should be disabled/not toggleable. When the user clicks "Select Delivery Option," the last/third panel (Payment) should be enabled. The first (Delivery Address) and second (Delivery Options) panels should be collapsed BUT active, and the third one (Payment) should be enabled and toggled.
Once the third panel is toggled/activated/enabled, the rest would be collapsed, but still accessible - i.e. if the user wants to go back to her billing info and change the address or select a different delivery option.
Ideally, I'd like to apply an overlay to the disabled panels, like this:
As they become enabled/active, the overlay would be gradually removed. How can I do this?
You need to use Javascript to accomplish this. To begin, look at Bootstrap's documentation for the events that fire if a collapsible element is toggled. For example:
//Fires when #panel-delivery is triggered to be shown
$('#panel-delivery').on('show.bs.collapse', function() {
// Enable / Disable other panels here.
})
And this will work just fine as you can see here. Do note I altered some of your code, since your markup is all over the place. I put the Jquery on the bottom of <body> so it's easier to see what it does.
My advice would be to first validate whatever the user needs to fill in before he can press the button to access the next panel. Could be as simple as making sure no required input is empty. (Not as a replacement for any back-end validating, but solely for better user experience).
Hope this helped.
Related
I'm not sure if what I'm trying to do is even possible but here it is.
I'm using bootstrap 3.3.7
I'm also working in TFS
There are blocks of code generated by clicking on items like "add user" or "block user" or "temporary user"
These get added depending on each persons user accounts and what they have in there.
So on that note. I cannot have ID="unique_name" because the auto generated code wouldn't know how to handle this.
these are examples I have been playing with.
NO IDS but not working
http://jsfiddle.net/misschohoh/10wk860x/2/
$('.panel-collapse').collapse({toggle: false});
$('body').on('click', '[data-toggle=collapse-next]', function (e) {
e.preventDefault();
// Try to close all of the collapse areas first
var parent_id = $(this).data('parent');
$(parent_id+' .panel-collapse').collapse('hide');
// ...then open just the one we want
var $target = $(this).parents('.panel').find('.panel-collapse');
$target.collapse('toggle');
});
with IDS and working
http://jsfiddle.net/misschohoh/56gwtpdm/
<!-- Here we insert another nested accordion -->
<div class="panel-group" id="accordion2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne"> Collapsible Inner Group Item #1 </a></h4>
</div>
<div id="collapseInnerOne" class="panel-collapse collapse in">
<div class="panel-body"> Anim pariatur cliche... </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo"> Collapsible Inner Group Item #2 </a></h4>
</div>
<div id="collapseInnerTwo" class="panel-collapse collapse">
<div class="panel-body"> Anim pariatur cliche... </div>
</div>
</div>
</div>
<!-- Inner accordion ends here -->
THIS IS WHAT I'M TRYING TO DO
but I can't figure out how to it without having IDs defined for each panel-collapse
with IDS and working and functions right with nested panels
https://www.bootply.com/vlLkd53dZb
Does anyone know if this is possible and can someone point me in the direction of getting this to work please.
Thanks!
I had to unbind then bind the panels, and stop propagation.
$('#chevronVisitors').unbind('click').on("click", function (e) {
e.stopImmediatePropagation();
I need one help. I want to add some animation effect while click on the link using Angular.js. I am explaining my code below.
<body ng-controller="demoController">
<div class="panel-group accordionsection" id="accordion" style="width:100%;">
<div class="panel panel-default">
<div class="mainaccordion_title-width panel-heading" role="tab" ng-click="active = !active">
<a class="panel-title sky-blue-light" role="button" data-toggle="collapse" data-parent="#accordion" aria-expanded="true">
<i class="glyphicon glyphicon-plus"></i> Description
</a>
</div>
<div id="collapse1" class="panel-collapse collapse in" >
<div class="panel-body" ng-hide="active">
<p style="white-space:pre-wrap;">
Demonetization of currency means discontinuity of the particular currency from circulation and replacing it with a new currency. In the current context it is the banning of the 500 and 1000 denomination currency notes as a legal tender.
</p>
</div>
</div>
</div>
</div>
</body>
script.js:
var app=angular.module('demo',[]);
app.controller('demoController',function($scope){
$scope.active=false;
})
Here when i am clicking on the link the below div is hiding/showing but here I need to give some transition effect like slide up/down. Here is my full plunkr code. Please help.
You can use ng-animate to achieve this
Here is the documentation with a working example
http://www.nganimate.org/
You can also create your own custom css animation class
and use $animate to add or remove your css class on the click action
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
I'm creating an accordion group using bootstrap 3, here is the code:
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<h3>Purchase No: 123 </h3>
</a>
</div>
</div>
<div id="collapse1" class="panel-collapse collapse">
content here
</div>
</div>
</div>
The code works fine when I open the accordion, but when I click it again (to close), it collapses, and open up again.
In short the accordion can't be closed once opened. I noticed the element changes at this particular div
<div id="collapse1" class="panel-collapse collapse in">
In that state the the accordion is collapsed, and when I close it, the class changes to collapsing (showing the animation) then it is removed. But briefly after that, the class "collapsing" and "in" added again so in the browser when I try to close an accordion it will like somehow shows "bouncy" animation which make it never closed when I try to close it
Any suggestions?
thanks all for the suggestions, but it is looks like i was using an older version of jquery which is not compatible with bootstrap 3, found this error on firefox's web inspector(idk but firebug does not point this error). I am now using jquery 2.x and the accordions works perfectly
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 :)