HomeAccordionCheckboxDropdownModalPopupProgressRatingSidebar

ui-accordion

Usage

<ui-accordion class="fluid styled" v-with="sections: sections">
    <a class="content">{{content}}</a>
</ui-accordion>
// Assuming the ui-accordion above is a child of 'app'
var app = new Vue({
    data: {
        sections: [{
            title: 'Google',
            content: 'http://google.com'
        }, {
            title: 'Facebook',
            content: 'http://facebook.com'
        }]
    }
})
{{content}}

Behavior

An accordion instance has the following methods

index
$toggle(index)
$open(index)
$close(index)

Attributes

active {Number}

Initializes the accordion with the given 'active' index

<ui-accordion active="1" v-with="sections: sections"></ui-accordion>

Customizing the <content>

Here is the Jade template of this component. The content blocks can be replaced using a selector. Important: Make sure you include all the Vue.js directives as in the original template for the Component to work.