How to give animation effect using Angular.js and CSS - javascript

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

Related

bootstrap nested panel collapse toggle without IDs

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();

Bootstrap Collapsible Form -- Just One Panel Available at a Time

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.

ng-repeat repeats the div the directive is on

I have the following code:
<div ng-repeat="item in selectedCategory">
<div class="repertoire-composer">
<div data-toggle="collapse" data-target="#compositions{{$index}}"
class="repertoire-composer-title">
<span class="fa fa-chevron-right"></span>
{{item.composer}}
<span class="fa fa-plus"></span>
</div>
<div id="compositions{{$index}}" ng-repeat="composition in item.compositions" class="repertoire-compositions collapse">
<div class="repertoire-composition">
{{composition}}
<span class="fa fa-remove" title="Remove"></span>
</div>
</div>
</div>
</div>
So what I basically want is to have a tree of multiple .repertoire-composer divs, each of which with one or many child .repertoire-composition inside its .repertoire-compositions div. So in the second repeat, angular should create one or more .repertoire-composition divs. However, what it seems to do is create more divs of the one the directive is on. Hope I've been explicit enough, here's the unwanted result:
So basically, why is my .repertoire-compositions div getting duplicated?
EDIT:
I was misunderstanding ng-repeat. This is the intended behaviour of it: to repeat the element the directive is on. Thanks for the clarification.
.repertoire-compositions is not being duplicated it's being actually ng-repeated by this part of your template:
<div id="compositions{{$index}}" ng-repeat="composition in item.compositions" class="repertoire-compositions collapse">
I guess it's because of the second ng-repeat on item.compositions, can you provide a set of data ?
I'm not sure but you can try this in the inner repeater:
<div id="compositions{{$index}}" class="repertoire-compositions collapse">
<div class="repertoire-composition" ng-repeat="composition in item.compositions">
{{composition}}
<span class="fa fa-remove" title="Remove"></span>
</div>
</div>

Bootstrap 3 Accordion stays open when collapsed

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

How to change href according to elements from an array AngularJS

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>

Categories