Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Accordion with Angular Directive

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.

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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment