[SalesForce] How to use e:force:navigateToUrl in lightning salesforce

figured it out. The namespace is case sensitive so it should have been:

openIdeaDetail : function(component, event, helper) {     
var idea = component.get("v.idea");
var selectedItem = event.currentTarget;
var selectedId = selectedItem.dataset.ideaid;
**var evt = $A.get("e.Merchants:OpenIdea");**

evt.setParams({"currentIdeaId": selectedId}).fire();    

helper.getIdea(component, selectedId);

$j("#ideadetail").modal('show');}

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: "[ + ]"
}