8

I'm trying to hide a div dynamically. This works for me. But when I try to do a nested div. It suddenly doesnt work anymore. Am I missing something?

Component(Working)

<ui:button label="Toggle" press="{!c.toggle}"/>
<div aura:id="text">Now you see me</div>

Component(Not Working)

<ui:button label="Toggle" press="{!c.toggle}"/>
<div>
    <div aura:id="text">Now you see me</div>
</div>

Controller

toggle : function(component, event, helper) {
        var toggleText = component.find("text");
        $A.util.toggleClass(toggleText, "toggle");
    },

Style

.THIS.toggle {
    display: none;
}
14

When styling lightning components, there needs to be a space between .THIS and the CSS classs for non-top-level elements. If you want the class toggle to work for both situations, you could add the non-top-level case to your CSS file:

.THIS.toggle {
    display: none;
}

.THIS .toggle {
    display : none;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.