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)