Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

This blog is part of 1 Tute Sets.

AngularJs Tutorial
Tute set by shristi.shandilya
14 Blogs
prev 1 2

  • Learn how to create an accordion using AngularJs

    @shristi.shandilya
    Recommendations Offline Message

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 3.13k
    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:

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

    HTML  and JAVASCRIPT :

    1. <body ng-app="myApp">
    2. <div class="Mainbody">
    3.     <ul class="accordion" ng-class="{active:accordion==1}">
    4.         <a href ng-click="accordion = 1">Section 1:Lorem Ipsum</a>
    5.         <li class="accordion-content" ng-show="accordion==1">
    6.             <ul>
    7.                 <li>Lorem Ipsum</li>
    8.                 <li>Lorem Ipsum</li>
    9.                 <li>Lorem Ipsum</li>
    10.                 <li>Lorem Ipsum</li>
    11.                 <li>Lorem Ipsum</li>
    12.             </ul>
    13.         </li>
    14.         
    15.     </ul>
    16.         
    17.     <ul class="accordion" ng-class="{active:accordion==2}">
    18.         <a href ng-click="accordion = 2">Section 2:Lorem Ipsum</a>
    19.         <li class="accordion-content" ng-show="accordion==2">
    20.             <ul>
    21.                 <li>Lorem Ipsum</li>
    22.                 <li>Lorem Ipsum</li>
    23.                 <li>Lorem Ipsum</li>
    24.                 <li>Lorem Ipsum</li>
    25.                 <li>Lorem Ipsum</li>
    26.             </ul>
    27.         </li>
    28.     </ul>
    29.         
    30.     <ul class="accordion" ng-class="{active:accordion==3}">
    31.         <a href ng-click="accordion = 3">Section 3 :Lorem Ipsum</a>
    32.         <li class="accordion-content" ng-show="accordion==3">
    33.             <ul>
    34.                 <li>Lorem Ipsum</li>
    35.                 <li>Lorem Ipsum</li>
    36.                 <li>Lorem Ipsum</li>
    37.                 <li>Lorem Ipsum</li>
    38.                 <li>Lorem Ipsum</li>
    39.             </ul>
    40.         </li>
    41.     </ul>
    42.     <ul class="accordion" ng-class="{active:accordion==3}">
    43.         <a href ng-click="accordion = 4">Section 4 :Lorem Ipsum</a>
    44.         <li class="accordion-content" ng-show="accordion==4">
    45.             <ul>
    46.                 <li>Lorem Ipsum</li>
    47.                 <li>Lorem Ipsum</li>
    48.                 <li>Lorem Ipsum</li>
    49.                 <li>Lorem Ipsum</li>
    50.                 <li>Lorem Ipsum</li>
    51.             </ul>
    52.         </li>
    53.     </ul>
    54. </div>
    55. <script type="text/javascript">
    56.     var app = angular.module('myApp',[]);
    57. </script>
    58. </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>

    Create an Accordion AngularJS directives Blog
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: