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();
Related
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 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 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 want to use a collapse (from bootstrap) for each element from an array.
So, I have an array extensions = ['firstCollapse', 'secondCollapse']. For each element I want to use a new collapse (there will be 2) and for this I iterate on the array, but I don't know how to modify the href to collapse each. Here is a part of code:
<div ng-repeat="ext in extensions">
<div class="panel-group" id="accordion" ng-model="ext">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#ext" ng-bind="ext"></a>
</h4>
</div>
<div id="ext" class="panel-collapse collapse in">
<div class="panel-body">
Body
</div>
</div>
</div>
</div>
</div>
</div>
I tried to modify href according to current element from array but it didn't work. How can I make this possible? Thanks a lot.
You just need to use the double {{}} notation inside the href attribute.
EG:
clicky
Anything inside the {{}} will be evaluated as javascript on the current $scope.
Hope this helps.
Use ng-href instead of normal href
and wrap the ext (model) in brackets ( {{ext}} ) like this:
<a data-toggle="collapse" data-parent="#accordion" ng-href="#{{ext}}" ng-bind="ext"></a>
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