AngularJS Directive - Accordion

Developer
Ben Babics
Size
3,264 Kb
Views
22,264
  1. AngularJS Directive - Accordion Previews
  2. AngularJS Directive - Accordion HTML Codes
  3. AngularJS Directive - Accordion CSS Codes
  4. AngularJS Directive - Accordion JS Codes

How do I make an angularjs directive - accordion?

Parent accordion directive (optional)child expander directive. What is a angularjs directive - accordion? How do you make a angularjs directive - accordion? This script and codes were developed by Ben Babics on 01 October 2022, Saturday.

AngularJS Directive - Accordion Previews
IQ Test

AngularJS Directive - Accordion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS Directive - Accordion</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app" ng-controller="myApp"> <div ng-repeat="item in items"> {{ item.title }} <hr ng-if="$index % 2 == 1"> </div> <h3>Accordion</h3> <accordion> <expander title="First Title"> <p>Hardcode any title and copy into an expander. this is my content.</p> </expander> <expander ng-repeat="item in items" title="{{ item.title }}">{{ item.content }}</expander> </accordion> <h3>Collapsible Buckets</h3> <expander ng-repeat="item in items" title=item.title>{{ item.content }}</expander>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

AngularJS Directive - Accordion - Script Codes CSS Codes

.accordion .expander { margin-bottom: 0;
}
.accordion .expander:not(:last-child) { border-bottom: 0;
}
.expander { margin-bottom: 20px; list-style: none; border: 1px solid #888;
}
.expander .title { text-indent: 5px; background: #ddd; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.expander .content { padding: 5px;
}

AngularJS Directive - Accordion - Script Codes JS Codes

console.clear();
var app = angular.module('app', []);
app.controller('myApp', function($scope) { // likely load from a service, but for the sake of this example... $scope.items = [ {title: "foo", content: "first Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab saepe sapiente doloremque ut blanditiis illum, eum recusandae labore nostrum impedit accusamus, culpa veritatis unde quo fugit facilis quae eos in!"}, {title: "bar", content: "second Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita molestiae ullam voluptates, eveniet ratione iste iusto voluptatem eos accusamus debitis quasi in provident earum unde nulla laboriosam, ut deleniti non."}, {title: "baz", content: "third Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eos harum veniam est esse quis dignissimos animi, enim quasi, ducimus laboriosam eligendi fuga molestiae labore, perspiciatis, quos ipsum sunt aspernatur."}, {title: "one", content: "first Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab saepe sapiente doloremque ut blanditiis illum, eum recusandae labore nostrum impedit accusamus, culpa veritatis unde quo fugit facilis quae eos in!"}, {title: "two", content: "second Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita molestiae ullam voluptates, eveniet ratione iste iusto voluptatem eos accusamus debitis quasi in provident earum unde nulla laboriosam, ut deleniti non."}, {title: "three", content: "third Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus eos harum veniam est esse quis dignissimos animi, enim quasi, ducimus laboriosam eligendi fuga molestiae labore, perspiciatis, quos ipsum sunt aspernatur."} ]
});
app.directive('accordion', function() { return { restrict: 'AE', replace: true, transclude: true, template: '<ul class="accordion" ng-transclude></ul>', controller: function() { var items = []; this.register = function(item) { items.push(item); if (items.length < 2) { item.isVisible = true; } }; this.handleSelectedItem = function(selectedItem) { angular.forEach(items, function(item) { if (selectedItem != item) { item.isVisible = false; } else { item.isVisible = true; } }); } } }
});
app.directive('expander', function() { return { restrict: 'E', replace: true, transclude: true, require: '?^accordion', scope: { title: '@' }, template: '<li class="expander"><div class="title" ng-click="handleToggle()">{{ title }}</div><div class="content" ng-show="isVisible" ng-transclude></div></li>', link: function(scope, element, attrs, accordionController) { var hasAccordionController = !!accordionController; scope.isVisible = false; scope.handleToggle = function() { scope.isVisible = !scope.isVisible; if (hasAccordionController) { accordionController.handleSelectedItem(scope); } } if (hasAccordionController) { accordionController.register(scope); } } };
});
angular.bootstrap('#app', ['app']);
AngularJS Directive - Accordion - Script Codes
AngularJS Directive - Accordion - Script Codes
Home Page Home
Developer Ben Babics
Username benbabics
Uploaded October 01, 2022
Rating 3
Size 3,264 Kb
Views 22,264
Do you need developer help for AngularJS Directive - Accordion?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ben Babics (benbabics) Script Codes
Name
AngularJS extend Base Controller
Truncate text
Angular Directive Scope
AngularJS Multiple Directives Sharing Model
Angular responsive table directive
LabNetwork Form Validation
A Pen by Ben Babics
Quikly Network UI Layout
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!