https://github.com/peterpme/angular-accordion-tabs-directive

AngularJS directive that allows you to reuse components in order to create an accordion-to-tab approach seamlessly.
https://github.com/peterpme/angular-accordion-tabs-directive

Last synced: 11 days ago
JSON representation

AngularJS directive that allows you to reuse components in order to create an accordion-to-tab approach seamlessly.

• Host: GitHub
• URL: https://github.com/peterpme/angular-accordion-tabs-directive
• Owner: peterpme
• License: apache-2.0
• Created: 2014-08-23T16:45:20.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-05-12T15:50:20.000Z (over 10 years ago)
• Last Synced: 2025-03-10T22:32:27.418Z (10 months ago)
• Language: HTML
• Size: 162 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Angular Accordion To Tab Directive

An angular directive that allows you to seamlessly integrate accordions on one breakpoint that will turn into tabs once a certain threshold is met.

### Browser Support

- IE10+ transitions

- IE9+ without transitions (todo)

## Install

Clone the repository and include it directly in your project. You can also use bower and install it as a dependency:

````

bower install angular-accordion-tabs-directive

```

Add the dependency in your Angular project dependency argument area:

```js

var app = angular.module('myApp', [

  'angular-accordion-tabs-directive'

]);

```

## Usage

Here is the general HTML used. You have two configuration options:

In the event that you want to use something besides active, you can do so by changing the value here:

```html`

data-activeClsName='differentActiveName'

```

You can set the breakpoint from mobile to desktop by using:

```html

data-transform='1000'

```

**Note: Both these parameters are required, not optional.**

## Html Structure

```html



  

    First Tab

    Second Tab

  

  


  First Tab

  
Your First Tab Content


   Second Tab

  
 Your Second Tab Content

  



```


### TODO

-Modernizr Support for those looking for transitions. Currently transitions only work IE10+

-Right now this works just fine if you reach a breakpoint on page load. I currently have a solution for automatically converting tabs to accordions and vice versa but I'm looking for a better solution. Stay tuned.