Lightning Hide, Show vs Toggle:

This lesson teaches about Css Hide and Show vs css Toggle

Css toggle is a simplified version for hide and show of html element

The below programs explains it clearly
<!--


 * created by 		:		Shiva RV
 * Date				:		25-10-2018
 * Description		:		Css Hide , show vs Toggle

  
-->
<aura:component >
    <!-- start of attribute declaration -->
    <aura:attribute name="isVisibleParagraph" type="Boolean" default="true"></aura:attribute>
    <aura:attribute name="isVisibleButton" type="Boolean" default="true"></aura:attribute>
	    
    <!-- end of attribute declaration -->
	<div class="slds-grid slds-grid_vertical-align-center">
  <div class="slds-col">This is Hide type
    <span>
      
    <p aura:id="textType1">Now you see me Method 1</p>
    <lightning:button aura:id="buttonType1Id" label="visible button"/>

    <br/>
        <br/>
    <lightning:button label="Css Hide Both"  onclick="{!c.hideElementCss}"/>
    <lightning:button label="Css Show Both"  onclick="{!c.showElementCss}"/>
    <lightning:button label="css Toggle"  onclick="{!c.toggleElementCss}"/>
        <br/>
      </span>
  </div>
 
    </div>
    
</aura:component>
 Js controller code :
({
	toggleElementCss : function(component, event, helper) {
                var toggleText = component.find("textType1");
		        $A.util.toggleClass(toggleText, "slds-hide");
				var toggleButton = component.find("buttonType1Id");
    			$A.util.toggleClass(toggleButton, 'slds-hide');
	},
    
    showElementCss : function(component, event, helper) {
                var textComp = component.find("textType1");
        		$A.util.removeClass(textComp, 'slds-hide');
				var buttonComp = component.find("buttonType1Id");
    			$A.util.removeClass(buttonComp, 'slds-hide');
	},
    
    hideElementCss : function(component, event, helper) {
                var textComp = component.find("textType1");
        		$A.util.addClass(textComp, 'slds-hide');
				var buttonComp = component.find("buttonType1Id");
    			$A.util.addClass(buttonComp, 'slds-hide');
	},

})
Below is the hello world App code:
<!--


 * created by 		:		Shiva RV
 * Date				:		13-10-2018
 * Description		:		Hello World Lighting App
  
-->

<aura:application extends="force:slds">
<!--this is the lightning app where you can place html codes , associate js code
		also can embed lightning component to it -->
  
    
 <!--Css Hide ,Show vs Css Toggle-->
	<c:HideCSSVsToggleCss></c:HideCSSVsToggleCss>

</aura:application>
Output:

Key Notes :
*Toggle is simply an short form for the below logic
If cssClass is present on the dom element , remove the css class , else add the css class