Ember.js and Bootstrap accordion effect

I am trying to use the bootstrap accordion component in my Ember.js project. I've looked at many solutions including:

1. ember.js and bootstrap accordion - the "ember way" of creating the view
2. http://ift.tt/1KYHiT4
3. and http://ift.tt/1NjbtSj

The first link seems a bit dated but provided some useful information. The second link actually has a working accordion component but I don't want to include everything else. The final link has many components but the accordion component. So, I decided to quickly implement one of my own:

In my template:

    <div class="cw-filter-group" id="accordion" role="tablist" aria-multiselectable="true">

                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingOne">
                                        <h4 class="panel-title">

                                            {{#accordion-panel data-toggle="collapse" data-parent="#accordion" data-href="#collapseOne" data-aria-expanded="true" data-aria-controls="collapseOne"}}
                                                Search Filters:
                                            {{/accordion-panel}}


                                        </h4>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                                        <div class="panel-body">
<!--Whatever needs to be displayed in collapsible panel goes here -->
                                        </div>
                                    </div>
                                </div>
                            </div>

Component markup:

<div role="button" data-toggle="{{data-toggle}}" data-parent="{{data-parent}}" aria-expanded="{{data-aria-expanded}}" aria-controls="{{data-aria-controls}}" {{action "toggleCollapse"}}>
{{yield}}
</div>

And component javascript:

import Ember from 'ember';
export default Ember.Component.extend({
    actions: {
        toggleCollapse: function() {
            Ember.$(this.get('data-parent') ).find(this.get('data-href')).slideToggle();
            this.toggleProperty('data-aria-expanded');
        }
    }
});

This works, however, I was wondering if there is a better 'Ember' way of achieving this?