CollapsiblePanel.app.html

<aura:application >
    <c:CollapsiblePanel header="CollapsiblePanel Demo">
    	<aura:set attribute="body">
            <ui:message title="Confirmation" severity="confirm" closable="true">
                This is an example of confirmation message.
            </ui:message>
            <ui:message title="Information" severity="info" closable="true">
                This is an example of message.
            </ui:message>
            <ui:message title="Warning" severity="warning" closable="true">
                This is an example of warning.
            </ui:message>
            <ui:message title="Error" severity="error" closable="true">
                This is an example of error message.
            </ui:message>
        </aura:set>
    </c:CollapsiblePanel>
</aura:application>

CollapsiblePanel.css

.THIS div.Message {
    color: #FFFFFF;
    font-weight : bold;
    background-color: #000000;
    width : 95% ;
    padding : 25px;
    margin : 10px auto 10px auto ;
    border-radius: 5px;
}

.THIS div.container {
    margin: 0px 20px 0px 40px;
}

.THIS div.expandCollapse{
    cursor : pointer;
    width:10%;
    float:right ;
}
.THIS div.show{
    display:block;
}
.THIS div.hide{
    display:none;
}

CollapsiblePanelController.js

({
	ToggleCollapse : function(component, event, helper) { 
		helper.ToggleCollapseHandler(component, event);
	}
})

CollapsiblePanelHelper.js

({
	ToggleCollapseHandler : function(component, event) {  
        var existingText = component.get("v.collpaseText"); 
        var container = component.find("containerCollapsable") ;
        
        if(existingText === "[ - ]"){
             component.set("v.collpaseText","[ + ]");
            $A.util.toggleClass(container, 'hide');  
        }else{
            component.set("v.collpaseText","[ - ]");
            $A.util.toggleClass(container, 'hide');  
        }  
	}
})