Accordion with Angular Directive
A demo nav bar and accordion lists wrapped in flexbox. The accordion feature is implemented via AngularJS directive.
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 | |
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'); | |
}); | |
} | |
} | |
}); |
@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; | |
} | |
} | |
} |