I have a main timeline and from the timeline I can access/show Symbol1... it has tasks, animations and button to go to Symbol2. When tasks are complete, the button shows, and user clicks the button to call/play Symbol2. Symbol2 opens/plays.
But, I can't access any of Symbol2's interactions/tasks/buttons because Symbol1 is still 'there' on top of Symbol2 even though I hid Symbol1.
This doesn't seem to be an issue when the overlapping items are elements on a main timeline... i.e. I can click hide and show 2 overlapping elements no problem, but as soon as I make the elements into symbols, overlap becomes an issue.
What is the best practice for interacting with symbols that overlap each other? Keep in mind, I do not want to completely remove Symbol1 from the DOM. I want users to be able to go back to Symbol1 from Symbol2 (toggle) if needed.
Show/hide should work since hide prevents events. You could try and use z-index.