Final Working Toggle Panel

Final-Working-Toggle-Panel.markdown

Final Working Toggle Panel

Forked from Steve Lombardi's Pen KwzPaw.

Forked from Captain Anonymous's Pen yyOBQV.

A Pen by Steve Lombardi on CodePen.

License.

index.html

<div ng-app="myApp" ng-init="foobar=true">
  
<div pb-toggle-panel panel-title="My Directive Panel Test" variable-name="foobar">Lorem ipsum dolor sit amet</div>
  
  
</div>

script.js

/* jshint strict:false */
/* global app */


'use strict';

var app = angular.module('myApp', []);

app.controller('OrderSearchCtrl', ['$scope', '$route', '$location', 'CountryFactory',
  function($scope, $route, $location, CountryFactory) {
  }]);



app.directive('pbTogglePanel', function() {
    return {
        restrict: 'A',
        scope:false,
        transclude: true,
        template: function(tElement, tAttrs) {
          var variableName = tAttrs.variableName;
          var panelTitle = tAttrs.panelTitle;
          var panelText = tElement.text;
          return '<div ng-click="' + variableName + '=!' + variableName + '" class="row toggleHeader" ng-class="{open : ' + variableName + '}">\n<div class="col-md-12">\n<h4>' + panelTitle + '</h4>\n</div>\n</div>\n\n<div id="the-' + variableName + '" class="row" ng-show="' + variableName + '">\n<div class="col-md-2">\n<div ng-transclude></div>\n</div>\n</div>';},
    };
});

style.scss

.toggleHeader {
  cursor: pointer;
  background-color: #ccc;
  padding: 5px;
  border-radius: 3px;
  margin-bottom: 10px;
  margin-top: 20px;
  h4 {
     &:before {
        content: '\25b8\0020';
    }
  }
  &.open {
    h4 {
      &:before {
        content: '\25be\0020';
      }
    }
  }
}