OSDC: Directive

<!DOCTYPE html>
<html>

  <head lang="en">
    <meta charset="utf-8">
    <title>OSDC: Directive</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.0.5/css/foundation.min.css">
    <style>
      .zippy {
        border: 1px solid #ddd
      }
      .zippy .title {
        padding: 12px;
      }
      
      .zippy .body {
        padding: 12px;
      }
      
      .zippy.closed .body {
        display: none;
      }
      
      .zippy.opend .body {
        display: block;
      }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    <script src="app.js"></script>
  </head>
  
  <body ng-app="MyApp">
    <zippy title="OSDC">
        <h1>Rocks!</h1>
        <zippy title="PIXNET">
          <h1>We are hiring!</h1>
          <img src="http://cdn2.business2community.com/wp-content/uploads/2012/07/hire.jpg">
        </zippy>
    </zippy>
  </body>
  
</html>

var myapp = angular.module('MyApp',[]);

myapp.directive('zippy', function(){
  return {
    restrict: 'E',
    transclude: true,
    scope: { title:'@title'},
    template:
      '<div class="zippy {{state}}">' +
        '<div class="title large button expand" ng-click="toggle()">{{title}}</div>' +
        '<div class="body" ng-transclude></div>' +
      '</div>',

    link: function(scope, element, attrs) {
      scope.state = "closed";
      scope.toggle = function() {
        scope.state = scope.state == 'opened' ? 'closed' : 'opened';
      };
    }
  };
});