How to swap 2 different component views in Lightning?

Question

What is the best way to create a views in Lightning? And how can i navigate from one view to another? For Ex. I have 2 different components, c:ListInfo and c:Elementinfo, When i click one element of the c:ListInfo it will redirect or navigate to the c:Elementinfo component and it will rendered into the position where the c:ListInfo component is placed.

HERE IS A PICTURE

when i click an element of this component

The view will navigate into this component

HERE IS WHAT I'VE GOT. (returning me an error of Uncaught error in $A.run() : Cannot read property 'setParams' of null)

PractiveApp.app

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

Elementinfo.cmp

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

ChangeTo.evt

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

ListInfo.cmp

<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>

ListInfoController.js

({
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');
}
})

Answer 1

@Danryl Tigol Carpio :

Add following line on your 'ListInfo.cmp' component:

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

This line tells the framework that c:ChangeTo event can be fired from this component.