sort elements out on click (Ember.js)

I have a component that display a bunch of data with different status.Each data is wrap up on different div.I also have a menu bar that suppose to show ONLY the elements that are bind with that action. I want to be able to hide elements that are not associate with onclick action.

THANK YOU GUYS

<script type="text/x-handlebars" id="new">
    <section>
        <ul>
            <li {{action 'showAllLeads'}} {{bind-attr class="allLeadsTabIsActive:activeMenuTab"}}>
                <a href="#">
                    <i class="icon-menu"></i>ALL
                </a>
            </li>
            <li {{action 'newLeads'}} {{bind-attr class="newLeadsTabIsActive:activeMenuTab"}}>
                <a href="#">TWO</a>
            </li>
            <li {{action 'activeLeads'}} {{bind-attr class="activeLeadsTabIsActive:activeMenuTab"}}>
                <a href="#">
                    <i class="icon-right-open"></i>ONE
                </a>
            </li>
        </ul>
    </section>
</script>


    App.NewController = Ember.Controller.extend({
     actions: {
            showAllLeads: function(){
                this.send('resetTabs');
                this.set('allLeadsTabIsActive', true);
            },

            activeLeads: function(){
                this.send('resetTabs');
                this.set('activeLeadsTabIsActive', true);
            },
            newLeads: function(){
                this.send('resetTabs');
                this.set('newLeadsTabIsActive', true)
            },
            resetTabs: function(){
                this.set('allLeadsTabIsActive', false);
                this.set('newLeadsTabIsActive', false);
                this.set('activeLeadsTabIsActive', false);
            },
        }
    })