LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

vAccordion

AngularJS multi-level accordion component.

Works with (or without) ng-repeat

{{ ::pane.header }}

{{ ::pane.content }}

{{ ::subpane.header }}

{{ ::subpane.content }}

Allows multiple sections open at once

{{ ::pane.header }}

{{ ::pane.content }}

{{ ::subpane.header }}

{{ ::subpane.content }}


Fork me on GitHub
CSS
/* Base styles
 ***************************************/
v-accordion {
  display: block;
}

v-pane {
  display: block;
}
v-pane.is-expanded > v-pane-content > div {
  display: visible;
}
v-pane[disabled] > v-pane-header {
  opacity: 0.6;
  pointer-events: none;
}

v-pane-header {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none;
}
v-pane-header:focus {
  outline: none;
}
v-pane-header > div {
  display: block;
}

v-pane-content {
  display: block;
  position: relative;
  overflow: hidden;
  max-height: 0px;
}
v-pane-content > div {
  visibility: none;
}

/* Theme: default
 ***************************************/
.vAccordion--default v-accordion {
  margin-top: 20px;
  padding-left: 20px;
}
.vAccordion--default v-pane-content > div {
  padding-bottom: 20px;
  opacity: 0;
  -webkit-transform: translate3d(0, 30px, 0);
          transform: translate3d(0, 30px, 0);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.vAccordion--default v-pane {
  overflow: hidden;
}
.vAccordion--default v-pane.is-expanded > v-pane-header {
  border-bottom-color: #2196F3;
}
.vAccordion--default v-pane.is-expanded > v-pane-header::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  opacity: 0;
}
.vAccordion--default v-pane.is-expanded > v-pane-header::before {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.vAccordion--default v-pane.is-expanded > v-pane-content > div {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.vAccordion--default v-pane[disabled] v-pane-header::after, .vAccordion--default v-pane[disabled] v-pane-header::before {
  display: none;
}
.vAccordion--default v-pane-header {
  padding: 5px 0;
  margin-bottom: 20px;
  border-bottom: 2px solid #D8D8D8;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.vAccordion--default v-pane-header::after, .vAccordion--default v-pane-header::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 10px;
  height: 1px;
  background-color: #2196F3;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  will-change: transform;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.vAccordion--default v-pane-header::before {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.vAccordion--default v-pane-header:hover, .vAccordion--default v-pane-header:focus {
  color: #2196F3;
}
JS
(function (angular) {
  'use strict';

  angular
    .module('myApp', [ 'ngAnimate', 'vAccordion' ])

    .controller('MainController', function ($scope) {

      $scope.panesA = [
        {
          id: 'pane-1a',
          header: 'Pane 1',
          content: 'Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.',
          isExpanded: true
        },
        {
          id: 'pane-2a',
          header: 'Pane 2',
          content: 'Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.'
        },
        {
          id: 'pane-3a',
          header: 'Pane 3',
          content: 'Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non.',

          subpanes: [
            {
              id: 'subpane-1a',
              header: 'Subpane 1',
              content: 'Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non.'
            },
            {
              id: 'subpane-2a',
              header: 'Subpane 2 (disabled)',
              content: 'Curabitur et ligula. Ut molestie a, ultricies porta urna. Quisque lorem tortor fringilla sed, vestibulum id.',
              isDisabled: true
            }
          ]
        }
      ];

      $scope.panesB = [
        {
          id: 'pane-1b',
          header: 'Pane 1',
          content: 'Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi.',
          isExpanded: true
        },
        {
          id: 'pane-2b',
          header: 'Pane 2',
          content: 'Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.'
        },
        {
          id: 'pane-3b',
          header: 'Pane 3',
          content: 'Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non.',

          subpanes: [
            {
              id: 'subpane-1b',
              header: 'Subpane 1',
              content: 'Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non.'
            },
            {
              id: 'subpane-2b',
              header: 'Subpane 2 (disabled)',
              content: 'Curabitur et ligula. Ut molestie a, ultricies porta urna. Quisque lorem tortor fringilla sed, vestibulum id.',
              isDisabled: true
            }
          ]
        }
      ];

      $scope.expandCallback = function (index, id) {
        console.log('expand:', index, id);
      };

      $scope.collapseCallback = function (index, id) {
        console.log('collapse:', index, id);
      };

      $scope.$on('accordionA:onReady', function () {
        console.log('accordionA is ready!');
      });

    });

})(angular);
Host Instantly Drag and Drop Website Builder

 

Description

AngularJS multi-level accordion.
Term
Mon, 11/27/2017 - 22:02

Related Codes

Pen ID
Pen ID
Pen ID