I have multiple lightning-accordion-section each containing a small form

enter image description here

I would like to do a querySelector on all my lightning-inputs to make sure that the user filled them properly. If the user doesn't select an accordion section (and thus closes it) I don't need to check that these fields are properly filled.

Unfortunately when closing an accordion-section, what's inside is still part of the DOM. Thus, my queryselectorAll returns these fields.

Is there a specific selector I could use to hide these ? I can imagine adding classes to my lightning-inputs, and checking on specific classes depending on what section the user selected but I would like something more generic.

Thank you for your help.

  • 1
    Without seeing your code, it's hard to tell. From a generic point of view, you could query .slds-is-open input.
    – sfdcfox
    Nov 11, 2021 at 14:22
  • @sfdcfox thank you this works fine to get the ones inside open accordions. As I also have inputs outside of accordions, I'm using this selector : querySelectorAll('lightning-input:not(lightning-accordion lightning-input),.slds-is-open lightning-input') This queries all lightning-inputs outside an accordion as well as all the ones in open accordion. Not sure if this is the optimal way but it works. Nov 20, 2021 at 20:27


You must log in to answer this question.

Browse other questions tagged .