Lightning Component to display Aura:if tag behavior

SK_AuraIfCmp.cmp

<aura:component >
    <aura:attribute name="displayedSection" type="string" default=""/>
    <div>
    	<b> This component is going to explain aura:if tag functionality</b>
    </div>
    <lightning:button label="Display Section 1" variant="brand" onclick="{!c.displaySection1}"/>
    <lightning:button label="Display Section 2" variant="brand" onclick="{!c.displaySection2}"/>
    <aura:if isTrue="{!v.displayedSection == 'section1'}">
        <div aura:id="firstsection">
        	<lightning:input type="text" label="Section 1 input" name="sec1" 
                             value="Inside Section 1" aura:id="sec1value"/>
        </div>
    </aura:if>
    <aura:if isTrue="{!v.displayedSection == 'section2'}">
        <div aura:id="secondsection">
			<lightning:input type="text" label="Section 2 input" name="sec1" 
                             value="Inside Section 2" aura:id="sec2value"/>        
        </div>
    </aura:if>
</aura:component>

SK_AuraIfCmpController.js

({
	displaySection1 : function(component, event, helper) {
        component.set("v.displayedSection","section1");
        var section1InputValue = component.find("sec1value");
        console.log('***section1InputValue: '+section1InputValue);
        var section2InputValue = component.find("sec2value");
        console.log('***section2InputValue: '+section2InputValue);
    },
    displaySection2 : function(component, event, helper) {
        component.set("v.displayedSection","section2");
        var section1InputValue = component.find("sec1value");
        console.log('***section1InputValue: '+section1InputValue);
        var section2InputValue = component.find("sec2value");
        console.log('***section2InputValue: '+section2InputValue);
    }
})