Angularjs Expand and Collapse Animation directive

Angularjs Expand and Collapse Animation directive

In this Post We Will Explain About is Angularjs Expand and Collapse Animation directive With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to angularjs Div expand and collapse onclickExample

In this post we will show you Best way to implement angularjs expand collapse animation, hear for angularjs expand collapse tablewith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

index.html

	<div ng-app="liveApp">
<d-expand-collapse>
			<div><span class="openque"></span><a href="javascript:void(0)" class="question ui-link">Why infinityknow.com?</a></div>
			<div class="best_answer"> 
				Tremendous Opportunity for Growth
				Equal Opportunity Every Person
				Earn or Make Money To Home without any InvestMent
				Open to New and Innovative Ideas
			</div>		
</d-expand-collapse>

<d-expand-collapse>

			<div><span class="openque" ></span><a href="javascript:void(0)" class="question ui-link">live24u says?</a></div>
			<div class="best_answer"> 
				We are Web Technology Experts and Team who provide you very Important information on Web Development information, Interview Questions and Answers, live project problem solution and their solution and online free tutorials – “infinityknow.com”.
			</div>
</d-expand-collapse>

<d-expand-collapse>
			<div><span class="openque" 
			></span><a href="javascript:void(0)" class="question ui-link">live24u – Goal</a></div>
			<div class="best_answer"> 
				Hello! I am angular king and live24u is my web technologies blog. My specialities are Vuejs,API,angularjs,Vuejs,PHP, API, jQuery,Earn money,HTML,CSS eCommerce,JS,Laravel, CMS and bespoke web application development.
			</div>		
</d-expand-collapse>
<d-expand-collapse>
			<div><span class="openque" ></span><a href="javascript:void(0)" class="question ui-link">what is infinityknow.com?</a></div>
			<div class="best_answer">
				infinityknow.com was founded in april, 2017 with the aim of all kind of sharing a place for some Tips, some about it related Tricks and Other very dificult Informer articles or new information for it technologies,tutorials and related solutions very expert level high solution in easy and simplified way that more helps our some Tricks and Tips community including like as Windows and server like as a linux and OS,Google,Google Adsense ,Fiver ,Upwork and How to Make Money Easy way to get basic ideas, learning and understandings.
			</div>		
</d-expand-collapse>
	</div>

index.js

var liveApp = angular.module('liveApp',[]);
liveApp.directive('dExpandCollapse', function() {
  return {
          restrict: 'EA',
          link: function(scope, param, attrs){            
            $(param).click( function() {
            	$(param).find(".best_answer").slideToggle('200',function() {                
            		$(param).find("span").toggleClass('openque closeques');
            	});            	
            	if($("div.best_answer:visible").length>1) { 
            		$(this).siblings().find(".best_answer").slideUp('slow');	
            	}
       		  });
          }
        }
});

style.css

.best_answer { display:none }

Example

I hope you have Got What is angularjs expand collapse panel And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.