How do I code lean....Hide or Collapse all elements/objects without calling it explicitly??

Ask the community
, ,
1

Dear All,
I have a hundred overlapping objects (images, vectors, text, etc) in a page, combinations of which are displayed according to what button is clicked by the user. It is really frustrating to hide/visible or collapse/expand each object and code for every button.

My question is, how do I hide or collapse all objects (50+) that does not correspond to a few select object id's that correspond to the events to that button?  

For example, lets say my page has objects with id's 1 to 100. I'd like to click a button and then display simply objects with id 5, id 10, id 15, id 20........ while hide/collapse every other object, without make individual statements.  Hence, when configuring multiple buttons, the total written code would be significantly less.  

I'm not sure if im making sense but I would be grateful if any wizards out there can help. In python or js I would normally write a conditional statement, where if the id's dont match id 5, id 10, id 15, id 20, it would be stored in a single array, which would then be called to show/hide or collapse/expand as needed. How do I do this in the wix api? :))
2

Hi,

The $w selector allows you to either select a single elements by passing the element ID, or to retrieve an element list of a certain type.

For example:

let btnList = $w("Button"); //btnList equals to an array of all the button type elements that exist on the page.

Then, you can iterate the array using a loop and filter out irrelevant buttons by checking the attributes of each element. for example you could use the ID attribute to remove buttons with a certain name, or to use the parent attribute to only interact with buttons that are children of a certain element.