accessible tabpanel component example with javascript, html, css and aria attributes

tabpanel.html

<div class="tabpanel-1">
    <ul role="tablist">
        <li id="tab-1" role="tab" aria-controls="panel-1" aria-selected="true" tabindex="0">dashboard</a></li>
        <li id="tab-2" role="tab" aria-controls="panel-2" aria-selected="false" tabindex="-1">account</a></li>
        <li id="tab-3" role="tab" aria-controls="panel-3" aria-selected="false" tabindex="-1">services</a></li>
    </ul>
    <div id="panel-1" aria-labelledby="tab-1" role="tabpanel" aria-hidden="false">
        <p>dashboard landing content</p>
    </div>
    <div id="panel-2" aria-labelledby="tab-2" role="tabpanel" aria-hidden="true">
        <p>account content</p>
    </div>
    <div id="panel-3" aria-labelledby="tab-3" role="tabpanel" aria-hidden="true">
        <p>services content</p>
    </div>
</div>

tabpanel.js

(function() {
    'use strict';
    var Backbone = require('../../backbone/package');
    module.exports = Backbone.View.extend({
        events: {
            'click > [role=tablist] [role=tab]': 'tabClick',
            'keydown > [role=tablist] [role=tab]': 'tabKeydown'
        },
        // for non screen reader users
        tabClick: function(e) {
            e.preventDefault();
            var $target = Backbone.$(e.target);
            // deselect all the tabs
            this.$el
                .find('> [role=tablist] [role=tab]')
                .attr('aria-selected', false)
                .attr('tabindex', -1);
            // select the tab click on
            $target
                .attr('aria-selected', true)
                .attr('tabindex', 0);
            // deselect all the panels
            this.$el
                .find('> [role=tabpanel]')
                .attr('aria-hidden', true)
                .attr('tabindex', -1);
            // select the panel associated with the tab clicked on
            this.$el
                .find('#' + $target.attr('aria-controls'))
                .attr('aria-hidden', false)
                .removeAttr('tabindex');
        },
        tabKeydown: function(e) {
            var $target = Backbone.$(e.target);
            // if left arrow key
            if (e.which === 37) {
                $target.prev()
                    .focus()
                    .trigger('click');
            // if right arrow key
            } else if (e.which === 39) {
                $target.next()
                    .focus()
                    .trigger('click');
            }
        }
    });
})();

tabpanel.scss

// ### tabpanel-1

%tabpanel-1 {

    margin: 0;

    > [role=tablist] {

        @include clearfix;

        margin: 0;
        padding: 0;

        > [role=tab] {
            
            background-color: $white-1;
            border-bottom: rem-calc(1) solid $white-1;
            border-left: rem-calc(1) solid $black-1;
            border-right: rem-calc(1) solid $black-1;
            border-top: rem-calc(1) solid $black-1;
            color: $black-1;
            cursor: pointer;
            display: block;
            float: left;
            list-style: none;
            margin: 0 rem-calc(1) 0 0;
            padding: rem-calc(13.5);
            text-decoration: none;

            &[aria-selected=false] {
                background-color: $black-1;
                border-bottom-color: $black-1;
                color: $white-1;
            }

        }

    }

    > [role=tabpanel] {
        
        border: rem-calc(1) solid $black-1;
        margin-top: rem-calc(-1);
        padding: rem-calc(10);

        &[aria-hidden=true] {
            display: none;
        }
        
    }

}

this is written in backbone and scss but you should be able to extract it for your own purposes. You can see it working here:
http://billshackelford.com/toolkit/components.html

All the source code can be found here:
https://github.com/bshack/shackstack