Apex Lightning-Aura – How to Identify the Clicked Div Element

This is because you are trying to access the DOM elements in the init handler before they have been rendered. Even if you use the native document.getElementById('myDiv') call inside the init handler with LockerService disabled, you'll get null back.

If you move your find('myDiv') call to a button click handler it will return the correct SecureComponent object.

Also, the access="global" on a div element won't do anything useful. That property is specifically for Aura types (components, attributes, etc).

Edit (Nov. 16):

From Doug's comment, for situations similar to this you may want to explore custom renderers. Handle with care though.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_renderers.htm?search_text=renderer

The problem is that each section is using the same information. For example, when you toggle one collapse area, the other's +/- sign will also toggle.

The easiest way to resolve this is to create a new component:

<aura:component>
<aura:attribute name="title" type="String" />
<aura:attribute name="collapseText" type="String" default="[+]"/>
<div>
    <div class="Message">
        <div style="width:90%;float:left">{!v.title}</div>
        <div class="expandCollapse" onclick="{!c.ToggleCollapse}">{!v.collapseText}</div>
    </div>
    <div class="container hide" aura:id="containerCollapsable">
       {!v.body}
    </div>
</div>
<aura:component>

From there, you can refactor your code:

<aura:component>
    <c:collapsibleSection title="Individual Information">
       <p>Hello</p> 
    </c:collapsibleSection>
    <c:collapsibleSection title="Group Information">
       <p>Hello</p> 
    </c:collapsibleSection>
</aura:component>

Otherwise, if you don't want a separate component, you'll have to add more code to your component:

<aura:component >
    <aura:attribute name="collapseText" type="String[]" default="['[ + ]','[ + ]']"/>
    <div>
        <div class="Message">
            <div style="width:90%;float:left">Individual Information</div>
            <div data-collapse-index="0" class="expandCollapse" onclick="{!c.ToggleCollapse}">{!v.collapseText[0]}</div>
        </div>
        <div class="container hide" aura:id="containerCollapsable">
           <p>Hello</p> 
        </div>
    </div>
    <div>
        <div class="Message">
            <div style="width:90%;float:left">Group Information</div>
            <div data-collapse-index="1" class="expandCollapse" onclick="{!c.ToggleCollapse}">{!v.collapseText[1]}</div>
        </div>
        <div class="container hide" aura:id="containerCollapsable">
           <p>Hello</p> 
        </div>
    </div>
</aura:component>

You can then determine which element to use based on the attribute value:

({
    ToggleCollapseHandler : function(component, event) { 
        var index = event.target.data.collapseIndex;
        var existingText = component.get("v.collapseText["+index+"]");
       var container = component.find("containerCollapsable")[index];
        if(existingText === "[ - ]"){
             component.set("v.collapseText["+index+"]","[ + ]");
            $A.util.addClass(container, 'hide');
        }else{
            component.set("v.collapseText["+index+"]","[ - ]"); 
            $A.util.removeClass(container, 'hide'); 
        }  
    }
})

It'd also be easier if you could reorganize your code so that the collapse section contained the element to collapse, because then you could toggle the parent class directly. You could further ease your troubles by displaying the + or - via CSS, which would eliminate the need for the text attribute, which could further simplify your code.

Here's an example:

<aura:component >
    <div class="collapse hide" aura:id="individualInfo">
        <div class="Message">
            <div style="width:90%;float:left">Individual Information</div>
            <div data-target="individualInfo" class="expandCollapse" onclick="{!c.ToggleCollapse}"></div>
        </div>
        <div class="container" aura:id="containerCollapsable">
           <p>Hello</p> 
        </div>
    </div>
    <div class="container hide" aura:id="groupInfo">
        <div class="Message">
            <div style="width:90%;float:left">Group Information</div>
            <div data-target="groupInfo" class="expandCollapse" onclick="{!c.ToggleCollapse}"></div>
        </div>
        <div class="container" aura:id="containerCollapsable">
           <p>Hello</p> 
        </div>
    </div>
</aura:component>

From there, you can then simply modify your CSS files as necessary:

.THIS .hide .container {
    display: none;
}
.THIS .expandCollapse::after {
    content: "[ - ]"
}
.THIS .hide .expandCollapse::after {
    content: "[ + ]"
}