[SalesForce] Show/Hide CSS Ignored When Inside an SLDS Grid Column

I'm just trying to get a simple show/hide experiment running using the code below. It runs fine when the code is outside the SLDS grid. However when I place the div inside a grid column, the console log "test" is displayed but the div remains visible. Am I missing something?? ..Thanks

Component

<aura:component >    
    <lightning:button label="Toggle" onclick="{!c.doInit}"/> 
    <div class="slds-grid">
        <div class="slds-col">
            <div class="slds-box">
                <div aura:id="detailDiv" >
                    <c:ShowHideCmpFilter Message="Detail"/>   
                </div>
            </div>
        </div>        
    </div> 
<aura:component >

CSS

.THIS.toggle {
    display: none;
}

Controller

({
    doInit : function(component, event, helper) {
        console.log("test");        
        var toggleText = component.find("detailDiv");        
        $A.util.toggleClass(toggleText, "toggle");        
    }
})

Best Answer

Without a space in your CSS, .THIS.some-class refers only to top-level elements. To specify child elements, there needs to be a space:

.THIS .toggle {
    display: none;
}

This will correctly toggle the contents as you expect.

Related Solutions

[SalesForce] Why is the lightning js function freezing at the event.setparams

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');}

[SalesForce] Creating a tab on a lightning component using aura and lightning design system

So I figured out a way to do this (hence adding it as an answer), but it feels very very ugly, and I'm sure I'm not using some basic Aura abilities.. so any improvements are more than welcome. Here's the code:

Component markup:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
    <div class="slds-tabs--default">
        <ul class="slds-tabs--default__nav" role="tablist">
            <li aura:id="tabpage" class="slds-tabs--default__item slds-text-heading--label slds-active" title="Active" onclick="{!c.changeTab}"
                role="presentation"><a class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-1__item">Active</a></li>
            <li aura:id="tabpage" class="slds-tabs--default__item slds-text-heading--label" title="Previous" onclick="{!c.changeTab}"
                role="presentation"><a class="slds-tabs--default__link" href="javascript:void(0);" role="tab" tabindex="-1" aria-selected="false" aria-controls="tab-default-2" id="tab-default-2__item">Previous</a></li>
        </ul>
        <div aura:id="tab-default-1" class="slds-tabs--default__content slds-show" role="tabpanel" aria-labelledby="tab-default-1__item">Item One Content</div>
        <div aura:id="tab-default-2" class="slds-tabs--default__content slds-hide" role="tabpanel" aria-labelledby="tab-default-2__item">Item Two Content</div>
    </div>
</aura:component>

Helper (used to find the div I clicked in):

({
    getContainerDiv: function(event, element) {
        var elem;
        if (!element) {
            elem = event.srcElement;
        }
        else {
            elem = element;
        }

        if (elem.classList.contains('slds-tabs--default__item')) {
            return elem;
        }
        else {
            return this.getContainerDiv(event, elem.parentElement);
        }
    }
})

JS Controller (main logic):

({
    changeTab: function(component, event, helper) {
        var clickedTab = helper.getContainerDiv(event, null);
        var tabs =  component.find('tabpage');
        for(idx = 0; idx < tabs.length; idx++)
         {
             tab = tabs[idx].elements[0];
             $A.util.removeClass(tab, 'slds-active');
             $A.util.removeClass(component.find(tab.children[0].getAttribute('aria-controls')), 'slds-show');
             $A.util.addClass(component.find(tab.children[0].getAttribute('aria-controls')), 'slds-hide');
         }

        $A.util.addClass(clickedTab, 'slds-active');
        $A.util.addClass(component.find(clickedTab.children[0].getAttribute('aria-controls')), 'slds-show');
        $A.util.removeClass(component.find(clickedTab.children[0].getAttribute('aria-controls')), 'slds-hide');
    }
})