0

I'am trying to hide child component after clicking anchor tag. I am passing value from parent to child.

If I click anchor tag particular that anchor tag section is hiding.i would like to hide complete child component and i have to open new components after clicking anchor tag how can do that.

parent COMPONENT:

    <li class="slds-feed__item">
       <c:S360_ListingSubArticle article="{!ar}"/> 
    </li>
</aura:iteration>

Childcomponent:

      <aura:attribute name="article" type="Article__kav"/>
<aura:attribute name="enableDetail" type="boolean" default="true"/>

    <aura:if isTrue=”{!v. enableDetail}”>
    <div class="slds-col slds-size_1-of-1 slds-large-size_9-of-12" style="padding-left:1em;">
        <div class="slds-grid slds-grid_vertical">
               <a onclick="{!c.articleUrl}" >
            <div class="slds-col">
                <span>
                    <div class="articleheading"> {!v.article.UrlName} </div>    
                </span>
            </div>
            </a>
            <div class="slds-col">
                <span>{!v.article.Article_Description__c}</span>
            </div>

        </div>

    </div>

  ({
      articleUrl: function(component, event, helper) {
   var articleId=component.get("v.article.Id");
   component.set("v.enableDetail",false);
}
})
1

Not sure what your requirements are or the ultimate behavior you are expecting is. Note that there are OOTB lightnin gcomponents that can help you achieve this, such as lightning:accordion:

   <lightning:accordion activeSectionName="B">
     <lightning:accordionSection name="A" label="Accordion Title A">This is the content area for section A</lightning:accordionSection>
     <lightning:accordionSection name="B" label="Accordion Title B">This is the content area for section B</lightning:accordionSection>
     <lightning:accordionSection name="C" label="Accordion Title C">This is the content area for section C</lightning:accordionSection>
   </lightning:accordion>

As a side note, this was mentioned to you in another post, avoid using anchor tags if you will be wanting to redirect users to anoethr lightning page, record or component:

Don’t hard code or dynamically generate Salesforce URLs in the href attribute of an tag. Use events, such as force:navigateToSObject or force:navigateToURL, instead.

If you are trying to hide elements in your page after them being selected, you can use the $A.Util.togleClass which adds or removes a class you have defined.

Overall, you might want to reconsider using anchors for whatever it is you are trying to develop based on your recent question history and leverage lightning:input and or lightning:buttons.

If you have a moment to go through the Component Reference from the lightning component developer guide, it might help you better leverage OOTB events and functionalities.

0

If you want to hide complete child components place anchor tag on parent component and do the stuffs there.

Example

Component:

<aura:component>
    <aura:attribute name="enableDetail" type="boolean" default="true"/>
    <a onclick="{!c.articleUrl}" >test</a>
    <aura:if isTrue="{!v.enableDetail}">
        <aura:iteration items="[1,2,3,4]" var="acc">
            <c:child/>
        </aura:iteration>
    </aura:if>
</aura:component>

Controller:

({
    articleUrl: function(component, event, helper) {
        component.set("v.enableDetail",!component.get("v.enableDetail"));
    }
})
  • ya but...if you place above aura:iteration it will select the values in child..suppose your child component contains title and description..it will select both title&description.i would like to add anchore for title – Lightning Learner Feb 1 '18 at 7:15
  • I cant get you clearly, if you want to hide all child components or particular component that you are clicking and what do you mean "like to add anchore for title " – vignesh Feb 1 '18 at 7:40

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.