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
Related
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.
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 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 :)
I'm trying to build an off-canvas push footer.
The idea is that that when selecting different options from the footer menu, the rest of the page gets pushed up to show the footer content
There is a tutorial for a sliding footer menu here but since it slides the [footer] content on top (as in top-layer) of the page this is not what I am looking for.
By using the bootstrap "accordion" I have managed to have the content drop down below the page, but since this falls outside the field of view (browser window), I am afraid that some visitors will not find it.
Here is a FIDDLE
<div class="pushDown">Please scroll down to bottom</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading col-xs-6">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div class="panel-heading col-xs-6">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</div>
</div>
<div class="panel panel-default">
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
CONTENT 1
</div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
CONTENT 2
</div>
</div>
</div>
</div>
Is there anyway to have the panels push up the rest of the content instead of dropping down?
Option 2 - here I have tweaked Christopher Yee's plugin to behave as I need but I can only get it to work with one button
PushFooter
$(function() {
var pushy = $('.pushy'), //menu css class
body = $('body'),
container = $('#container'), //container css class
push = $('.push'), //css class to add pushy capability
siteOverlay = $('.site-overlay'), //site overlay
pushyClass = "pushy-left pushy-open", //menu position & menu open class
pushyActiveClass = "pushy-active", //css class to toggle site overlay
containerClass = "container-push", //container open class
pushClass = "push-push", //css class to add pushy capability
menuBtn = $('.menu-btn, .pushy a'), //css classes to toggle the menu
menuSpeed = 300, //jQuery fallback menu speed
menuWidth = pushy.width() + "px"; //jQuery fallback menu width
function togglePushy(){
body.toggleClass(pushyActiveClass); //toggle site overlay
pushy.toggleClass(pushyClass);
container.toggleClass(containerClass);
push.toggleClass(pushClass); //css class to add pushy capability
}
How would I edit the JS if I would use the class names .pushy-left2 .menu-btn2 .pushy2 etc..
Try to make an #id stick to the content area of the footer, and make a link in the trigger of the accordion.
when you click the link make it link to the content area 'a href="mysite.com/home#article"'
so it centers the page on that piece of information
I'm using the panel-group to make an accordion as shown in the "Collapse" section of the Javascript nav at http://getbootstrap.com/javascript/#collapse
Except that I want the accordion to follow the screen as the user scrolls down, so I wrapped it all in a bootstrap well and added position:fixed to the div's style. Unfortunately, once I scroll to the bottom and try to expand the accordion, it expands off the bottom of the screen. When the accordion isn't position fixed, however, the screen will grow to accommodate the new height of the accordion. Is there a way I can have my cake and eat it too?
<div class="well" style="position: fixed"> <!--Causes this div to grow off the screen-->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a id="panelOneLabel" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Title</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<!--a bunch of content here-->
</div>
</div>
</div>
<!--a bunch of other similar panel panel-defaults-->
</div>
</div>
I ended up solving the problem by defining a height for the well and setting the overflow-y to auto in css. Now when it grows off the screen the well gets a scroll bar that allows me to get to any part of the accordion no matter what.
I just necro'd the code that I implemented when I was having this problem for anyone who wants it. The solution I went with at the time uses inline styling and probably isn't the greatest, or necessarily exactly what you want for your particular situation so I'd encourage anyone looking at this to think about their own choice of whether or not to use inline styling, and how to define their own css rules to solve the problem.
<div data-spy="affix" style="width: inherit; height: 100%; max-height: 80%; overflow-y: auto" class="well">...somewhere in here is my accordion...</div>