How to use nextElementSibling in Lightning Controller

826 Asked by OwenWelch in Web-development , Asked on Aug 2, 2021

I am trying to use the nextElementSibling in liightning controller but its showing error, what is the alternative of nextElementSibling to use, below is the sample code.

 Lorem ipsum dolor ea commodo consequat.
 
 <button class="btm" aura:id="btId" onclick="{!c.open}">Section 3</button>  Lorem ipsum ex ea commodo consequat.
 

Here is the controller code
open : function(component, event, helper) { var acc = component.find("btm"); var i; for (i = 0; i < acc xss=removed xss=removed panel.style.display = "none" panel.style.display = "block">

Answered by Lucas BROWN

The Element. nextElementSibling read-only property returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list.

This is not an issue with nextElementSibling. I believe, after Summer'16 dynamically changing style.display in Lightning Component may not work properly. You can follow the Lightning Components Developer Guide to Dynamically Showing or Hiding Markup.

You have to modify the code as below.

Component:

Lorem ipsum dolor ea commodo consequat. Section 3 Lorem ipsum ex ea commodo consequat.

Controller

      ({ open : function(component, event, helper) { var target = event.currentTarget; var panel = target.nextElementSibling; $A.util.toggleClass(panel, "toggle"); } })

CSS

      /*toggleCss.css*/ .THIS.toggle { display: none; }

Update

If you are using force:slds in you Lightning application then you can simply use $A.util.toggleClass(panel, "slds-hide"); without implementing any CSS.

How to use nextElementSibling in Lightning Controller

Your Answer