Accordion with Angular Directive

Accordion-with-Angular-Directive.markdown

Accordion with Angular Directive

A demo nav bar and accordion lists wrapped in flexbox. The accordion feature is implemented via AngularJS directive.

A Pen by Tien on CodePen.

License.

index.jade

doctype html
html(lang="en", ng-app='app')
  head
    title='current page selected'
    link(href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext',rel='stylesheet', type='text/css' )
    - var mainContent = "Content goes there";
  body(ng-controller='mainCtrl')
    nav(class='wrapper')
      a(class='item', href="page1.html") Page One
      a(class='item') Page Two
      a(class='item') Page Three
      a(class='item') Page Four
    section(id='accordWrap')
      div(class='accordCnt opened')  
        div(class='accordHead clearfix')
          h3 Item 1
          toggle-btn +
        div(class='accordBody')
          ul
            li sub item 1   
            li sub item 1   
            li sub item 1
      div(class='accordCnt')  
        div(class='accordHead clearfix')
          h3 Item 2
          toggle-btn +
        div(class='accordBody')
          ul
            li sub item 2   
            li sub item 2   
            li sub item 2

      div(class='accordCnt')  
        div(class='accordHead clearfix')
          h3 Item 3
          toggle-btn +
        div(class='accordBody')
          ul
            li sub item 3   
            li sub item 3   
            li sub item 3

      div(class='accordCnt')  
        div(class='accordHead clearfix')
          h3 Item 4
          toggle-btn +
        div(class='accordBody')
          ul
            li sub item 4   
            li sub item 4   
            li sub item 4
    
    

script.js

angular.module('app',[])
.controller('mainCtrl', function($scope){
  $scope.toggle = function(){
  	$scope.tabBtn = '-';
  }
})
.directive('toggleBtn', function(){
  return {
  	restrict:'AE',
    replace: true,
    link: function(scope, elem, attr){
      elem.bind('click', function(){
        // toggle the icons
        elem.text().toString()=='+'?elem.text('-'):elem.text('+');
        var accHeader = elem.parent(), accBody = accHeader[0].nextElementSibling;
accBody.style.opacity=elem.text().toString()=='+'?0:1;
accBody.style.height=elem.text().toString()=='+'?'0':'70px';            
      });    
      elem.bind('mouseover', function(){
        elem.css('cursor', 'pointer');
      });
    }
  }
	
});

style.scss

@import "compass/css3";
@import "compass/reset";
@import "compass/css3";
/* Define variables */
// colours
$blue : #1DB0EB;
$white : #FFF;
$orange: #E18626;
$steel: #666666;
$yellow: #F5C463;
$grey: #DCDCDC;

// fonts
$main-font: 'Lato';

// paddings
$padding-top: 20px;

@mixin flexbox() {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
  
@mixin flex($values) {
  flex:  $values;
}

@mixin order($val) {
  order: $val;
}
  
body .wrapper {
  @include flexbox();
  font-family: $main-font;
}
.content{
  @include flexbox();
  padding-top: $padding-top;
  font-family: $main-font;
}
.item {
  display:block;
  padding: 1em;
  width:25%;
  text-align: center;
  background-color: $blue;
  color: $white;
  border:0px solid $white;
  border-width: 0px 1px 1px 0px;
  &:last-child {
    border-right:0;
  }
  &:hover {
    background: $orange;
  }
  &:active {
    background: $steel;
  }
}
#accordWrap{
  @include flexbox();
}
.accordCnt {
  display: block;
  width:25%;
  border-right:1px solid $white;
  &:last-child {
    border-right:0;
  }  
  .accordHead {
    @include flexbox();
    padding: 10px 0;
    background: $grey;
    border: 0 solid $grey;
    h3 {
      width:50%;
      font-family: $main-font;
      color:$blue;
      text-align: right;
    }
    toggle-btn {
      width:30%;
      color:$steel;
      text-align: left;
    }
  }
  .accordBody {
    font-family: $main-font;
    width: 100%;
    overflow:hidden;
    opacity: 0;
    clear:both;
    height: 0;
    transition: all .3s ease .15s;
    ul {
      text-align:center;
      li {
        padding-top:5px;
        color: $steel;
      }
    }
    &:last-child{
        border: 0px solid $grey;
        border-width: 0px 1px 1px 1px;
        border-radius:0px 0px 5px 5px;
    }
  }
}