Step-by-step guide – Zippy (collapsable div) using Angular js

This post talks about creating a simple zippy/ collapsable HTML div element using Angular js. A zippy is an HTML component which can be used to show/hide a section of your html on click of a link, similar to the folder view of windows

.

I have used bootstrap-css for styling but you can choose your own styles here.

    1. Setup basic angular page by adding ‘angular-min.js’ to the script tag and ‘ng-app’ to the HTML tag.
             <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
             <script type="text/javascript" src="http://docs-angularjs-org-dev.appspot.com/js/angular.min.js"></script>
             <script type="text/javascript" src="script.js">
    2. Create a demo controller in your script to provide values for the div elements and attach it to the parent div using ‘ng-controller’.
                 //script
                 function DemoCtrl($scope) {
                   $scope.cars = ['Audi', 'BMW', 'Merc'];
                   $scope.bikes = ['Yamaha', 'Honda', 'Enfield'];
                 }
      
                 // HTML
                 <div ng-controller="DemoCtrl">
    3. Add ‘ng-init’ to the div element you want to act as zippy. This will be called on the page loads(page refresh). In this, you can specify whether you want the zippy to be open or close at page load.
             <div ng-init="showCars=true">
    4. Now, create a header element for the zippy. use ‘ng-click’ on the header element to show/hide the zippy contents on click of header.
             <a href="" ng-click="showCars=!showCars">My Cars</a>
    5. Finally, create a div element to show/hide based on the state of the variable defined.
      <div ng-show="showCars">
         <div ng-repeat="car in cars">
            <label class="control-label">{{car}}</label>
         </div>
      </div>

For the complete working code, check out this plunker (http://plnkr.co/edit/5kJNWE?p=preview)

Screen Shot 2013-11-06 at 11.44.21 PM

@Facebook

Subscribe to Blog via Email

Quick Enquiry

2 thoughts on “Step-by-step guide – Zippy (collapsable div) using Angular js

    • Sorry for late reply. Fixed it now. The issue was with the version of angular js included in the plunk. I have updated it to the new location.

Leave a Reply

Your email address will not be published. Required fields are marked *