<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:attribute name="selectedItem" type="String" />
    <div>
        <div aura:id="listContainer" id="listContainer">
            <aura:iteration items="1,2,3,4,5,6,7,8,9,10" var="item">
                <div>
                    <ui:button press="{!c.toggleView}" label="{! 'Item ' + item }"/>
                </div>
            </aura:iteration>
        </div>
        <div aura:id="selectedContainer" id="selectedContainer" class="hide">
            <div>
                <h1>{! v.selectedItem}</h1>
                <ui:button press="{!c.toggleView}" label="Back"/>
            </div>
        </div>
    </div>
</aura:component>

({
    toggleView : function(component, event, helper) {
        var source = event.getSource(),
            label = source.get("v.label"),
            selectedContainer = component.find('selectedContainer'),
            listContainer = component.find('listContainer');

        component.set("v.selectedItem", label);

        $A.util.toggleClass(selectedContainer, 'hide');
        $A.util.toggleClass(listContainer, 'hide');

        $A.get('e.ui:updateSize').fire();
    }
})

.THIS div {
    border: 1px #AFAFAF;
    border-radius: 10px;
}
.THIS #selectedContainer div {
    background-color: #BFACE0;
    height: 200px;
    padding: 10px;
    margin: 10px;
}

.THIS #listContainer div {
    background-color: #8BB8B9;
    height: 200px;
    padding: 10px;
    margin: 10px;
}

.THIS #listContainer div:nth-child(2n+0) {
    background-color: #E5EEEF;
}

.THIS .hide {
    display: none;
}