<aura:application >
    <c:ListInfo/>
</aura:application>

<aura:component >
    This is my second component
</aura:component>

<aura:event type="APPLICATION">
    <aura:attribute name="actnew" type="String"/>
</aura:event>

<aura:component controller="EventCrtlr">

    <aura:attribute name="ActiveEvents" type="Event__c"/>

    <aura:handler event="c:ChangeTo" action="{!c.navigate}"/>
    <aura:handler name="init" value="{!this}" action="c.ShowActiveEvents"/>

    <aura:iteration items="{!v.ActiveEvents}" var="list">
        <a href="c.Navigate">{!list.Event_Name__c}</a>
    </aura:iteration>

    <div class="list-group" aura:id="listview">
        <c:Elementinfo/>
    </div>

</aura:component>

({
myAction : function(component, event, helper) {
    var newAccountvar = "JSON";
    var newAccount = $A.get("e.c:ChangeTo");
    newAccount.setParams({ "actnew": newAccountvar });
    newAccount.fire();
},
navigate:function(component,event,helper) {
    var toggleText = component.find("listview");
    $A.util.addClass(toggleText,'toggle');
}
})

<aura:registerEvent name="changeToEvent" type="c:ChangeTo"/>