Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Learn how to create an accordion using AngularJs

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 3.02k
    Comment on it

    Hii,
    In this blog i am going to discuss about accordions i.e is a web control used while creating menus, content-rich pages.

    • Main idea behind using this user interface accordian is to collapse content and make it expanded when hovered or clicked on the header part. 
    • Using accordion in your web page can give user a feature to view content according to thier choice.
    • There are many advantages of using accordion that's why it is the most commonly used feature nowdays.
      •  A container in which accordian feature is used stretches its  width and height automatically.
      •  It help to minimise page scrolling by hiding the content and create a collapsed data view.

    To learn how to create an accordion using angularjs go through the example given below

    In this example i have used few angularjs directives such as ngClick, ngShow and ngInit.

    ngClick -  To link each Accordion contents.

    ngShow - To display Accordion content in expanded view, when the user click on collapsed content .

    ngInit - To display intial view of an accordion created i.e the default view.

    EXAMPLE:

    CSS:

     ul{list-style-type: none;margin: 5px auto;padding: 0;overflow: hidden;}
     a, a:active, a:focus {outline: 0;}
    .Mainbody{background-color: white;box-shadow: 0 0 10px grey;float: left;margin-top: 5px;padding:     10px;width:280px;}
     Mainbody > ul > a{padding: 10px 0;text-decoration:none;color:#000;font-weight:bolder;font-size:20px;}
     li.accordion-content ul li {color: #3c3b37;padding: 5px 0;}
     li.accordion-content ul li:hover {background-color: #cdcdc8;color: #3c3b37;padding: 5px 0;}

    HTML  and JAVASCRIPT :

    <body ng-app="myApp">
    <div class="Mainbody">
    	<ul class="accordion" ng-class="{active:accordion==1}">
    		<a href ng-click="accordion = 1">Section 1:Lorem Ipsum</a>
    		<li class="accordion-content" ng-show="accordion==1">
    			<ul>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    			</ul>
    		</li>
    		
    	</ul>
    	    
    	<ul class="accordion" ng-class="{active:accordion==2}">
    		<a href ng-click="accordion = 2">Section 2:Lorem Ipsum</a>
    		<li class="accordion-content" ng-show="accordion==2">
    			<ul>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    			</ul>
    		</li>
    	</ul>
    	    
    	<ul class="accordion" ng-class="{active:accordion==3}">
    		<a href ng-click="accordion = 3">Section 3 :Lorem Ipsum</a>
    		<li class="accordion-content" ng-show="accordion==3">
    			<ul>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    			</ul>
    		</li>
    	</ul>
    	<ul class="accordion" ng-class="{active:accordion==3}">
    		<a href ng-click="accordion = 4">Section 4 :Lorem Ipsum</a>
    		<li class="accordion-content" ng-show="accordion==4">
    			<ul>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    				<li>Lorem Ipsum</li>
    			</ul>
    		</li>
    	</ul>
    </div>
    <script type="text/javascript">
    	var app = angular.module('myApp',[]);
    </script>
    </body>

    NOTE: Must include this link in your file

     

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: