Make brand story animate slide down/up

app/assets/javascripts/shared/angular-slideables.js

@@ -0,0 +1,55 @@
+/*
+ * Angular Slideables - A "pure" Angular implementation of jQuery-style slideToggle()
+ * Source: https://github.com/EricWVGG/AngularSlideables
+ * By Eric Jacobsen, used under MIT licence
+ */
+
+angular.module('angularSlideables', [])
+.directive('slideable', function () {
+    return {
+        restrict:'C',
+        compile: function (element, attr) {
+            // wrap tag
+            var contents = element.html();
+            element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');
+
+            return function postLink(scope, element, attrs) {
+                // default properties
+                attrs.duration = (!attrs.duration) ? '1s' : attrs.duration;
+                attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
+                element.css({
+                    'overflow': 'hidden',
+                    'height': '0px',
+                    'transitionProperty': 'height',
+                    'transitionDuration': attrs.duration,
+                    'transitionTimingFunction': attrs.easing
+                });
+            };
+        }
+    };
+})
+.directive('slideToggle', function() {
+    return {
+        restrict: 'A',
+        link: function(scope, element, attrs) {
+            var target, content;
+
+            attrs.expanded = false;
+
+            element.bind('click', function() {
+                if (!target) target = document.querySelector(attrs.slideToggle);
+                if (!content) content = target.querySelector('.slideable_content');
+
+                if(!attrs.expanded) {
+                    content.style.border = '1px solid rgba(0,0,0,0)';
+                    var y = content.clientHeight;
+                    content.style.border = 0;
+                    target.style.height = y + 'px';
+                } else {
+                    target.style.height = '0px';
+                }
+                attrs.expanded = !attrs.expanded;
+            });
+        }
+    }
+});