Targeting Layers with Javascript

Hi Brent!

I'm not a JavaScript expert nor can I offer support of this functionality, but I can direct you to a similar forum thread where this was discussed and I think it may be of assistance to you.

Brent, not sure what you mean by "target". Like turning a side layer on or off? No, not directly. You have to use a SL variable that you control from JS and then set a trigger when the variable changes.  

Allthough SlideLayers as is indeed in SL360 are not easily controllable with Javascript, i needed to control it with Javascript because i have quite some other code setting images and text dynamically on layers.

So i figured out a way to hide /show layers anyway.

- At first make sure your layers are visible at start.
- Then immediately trigger your Javascript
- Use z-index to change the order of your layers. Normally any SlideLayer is above the baselayer.
Changing that order now makes it hide below your baselayer. Whenever you need it to be visible, bring it back above as in the code below...

var idCardLayer = document.querySelector("#slide-window > div > div > div > div > div:nth-child(6)");
gsap.set(idCardLayer, {zIndex:0});

var baseLayer = document.querySelector("#slide-window > div > div > div > div > div.slide-layer.base-layer.shown");
gsap.set(baseLayer, {zIndex:1});

Biggest hurdle i have however is that there is no good reusable way to select your layer. If a layer had a unique CSS class you could set, or accessibility labels... then that would be usable...