function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Antigoni TsouriAntigoni Tsouri 

Salesforce lightning design system with re-usable components not expanding divs

I have the following child component that represents a section on a form: 
<aura:component description="EWQuoteFormStep">
    <aura:attribute access="public" name="name" type="String" required="true"/>
    <aura:attribute access="public" name="label" type="String" required="true"/>
    <aura:attribute access="public" name="open" type="Boolean" required="true"/>
    <aura:attribute access="public" name="stepBody" type="Aura.Component[]" required="true"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="change" value="{!v.open}" action="{!c.handleStateChange}"/>

    <aura:registerEvent name="quoteStepClick" type="c:Click"/>

    <div class="slds-form-element">
        <div class="slds-box">
            <div class="slds-section slds-is-open" aura:id="collapsibleQuoteFormStep">
                <div aria-controls="expando-unique-id" aria-expanded="true">
                    <div class="slds-align--absolute-center">
                        <div data-id-at="{!v.name+'Section'}" onclick="{!c.fireClickEvent}">
                            <p>{!v.label}</p>
                        </div>
                    </div>
                    <div aria-hidden="false" class="slds-section__content" id="expando-unique-id">
                        {!v.stepBody}
                    </div>
                </div>
            </div>
        </div>
    </div>
</aura:component>

And a parent component that provides the definition of 4 components of the above type:
<aura:component description="EWQuoteForm" implements="forceCommunity:availableForAllPageTypes" access="global">

    <aura:attribute name="ClientDetails" type="Boolean" default="true"/>
    <aura:attribute name="MainResidence" type="Boolean" default="false"/>
    <aura:attribute name="Cover" type="Boolean" default="false"/>
    <aura:attribute name="ReviewAndSubmit" type="Boolean" default="false"/>
    <aura:handler name="quoteStepClick" event="c:Click" action="{!c.handleClickEvent}"/>

    <div class="o-wrapper o-wrapper--large">
        <form class="slds-form--stacked slds-form slds-m-top_medium slds-m-bottom--medium" aura:id="quoteForm">

            <c:EWQuoteFormStep aura:id="ClientDetails" name="ClientDetails" label="{!$Label.c.EWClientDetailsSection}" open="{!v.ClientDetails}">
                <aura:set attribute="stepBody">
                    <c:EWCustomerInfoForm/>
                </aura:set>
            </c:EWQuoteFormStep>

            <c:EWQuoteFormStep aura:id="MainResidence" name="MainResidence" label="{!$Label.c.EWMainResidenceSection}" open="{!v.MainResidence}">
                <aura:set attribute="stepBody">
                   <!--<ui:inputText label="field test 1"/>-->
                    <!--<ui:inputText label="field test 2"/>-->
                    <c:EWCustomerInfoForm/>
                </aura:set>
            </c:EWQuoteFormStep>

            <c:EWQuoteFormStep aura:id="Cover" name="Cover" label="{!$Label.c.EWCoverSection}" open="{!v.Cover}">
                <aura:set attribute="stepBody">
                    <c:EWCustomerInfoForm/>
                </aura:set>
            </c:EWQuoteFormStep>

            <c:EWQuoteFormStep aura:id="ReviewAndSubmit" name="ReviewAndSubmit" label="{!$Label.c.EWReviewAndSubmitSection}" open="{!v.ReviewAndSubmit}">
                <aura:set attribute="stepBody">
                    <c:EWCustomerInfoForm/>
                </aura:set>
            </c:EWQuoteFormStep>

        </form>
    </div>

</aura:component>

This is the controller of the each of the children components, simply producing an click event every time it is clicked:
({
    doInit : function (cmp, event, helper) {
        if(cmp.get("v.open") === false) {
            var step = cmp.find("collapsibleQuoteFormStep");
            $A.util.toggleClass(step, "slds-is-open");
        }
    },

    fireClickEvent : function (cmp, event, helper) {
       var clickEvent = cmp.getEvent("quoteStepClick");
        clickEvent.setParams({"clickedComponentName":cmp.get("v.name"), "open":cmp.get("v.open")});
        clickEvent.fire();
    },

    handleStateChange : function (cmp, event, helper) {
        var step = cmp.find("collapsibleQuoteFormStep");
        $A.util.toggleClass(step, "slds-is-open");
    }
})

And the controller of the parent components that listens to the click event and ha the responsibility of changing the state of its children is this: 
({
    handleClickEvent : function (cmp, event, helper) {
        var producerName = event.getParam("clickedComponentName");
        var isStepOpen = event.getParam("open");

        cmp.set("v."+producerName, !isStepOpen);

        if( isStepOpen === false ) {
            var steps = cmp.find("quoteForm").find({ instancesOf : "c:EWQuoteFormStep" });

            if($A.util.isArray(steps)) {
                for(var i = 0; i < steps.length; i++) {

                    var stepName = steps[i].get("v.name");

                    if(!(stepName == producerName)) {
                        if(steps[i].get("v.open") === true) {
                            cmp.set("v."+stepName, "false");
                        }
                    }
                }
            }
        }
    }
})

For some reason it works just fine when I click the sections ahead of each other. The next section is expanded and the previous sections (sub-components ) in the hierarchy are collapsed via toggling the class "slds-is-open". However once I expand a section it is no longer "clickable" so I can expand it again. Also the previous sections in the hierarchy are not clickable once a section is expanded.

From a lot of console debugs, I have narrowed the issue down to something happening after the line "$A.util.toggleClass(step, "slds-is-open")" that makes the sections not clickable, but I am still to figure out exactly what.

The end goal is an "accordion" effect where once you expand one section all other are collapsed. At the moment this happens only once with each section and then stops. It also happens only forward and not with previous sections.

Any help would be grately appreciated, I am already debugging this for couple of days !