How do I "show" a symbol in the symbols panel, then "hide" it again?

Question

So. I feel like this must be easier than I'm making it but I can't seem to get it right, any help would be greatly appreciated.
I need to create a bunch of robust symbols and import each of them, but I'd like to leave them all inside the symbols panel if possible (for simplicity on the main timeline and because there will be many, many of them with a ton of interactivity in each).
When I'm on the main timeline, (which is basically just a slideshow of static .png files) I'd like to have a click event "open" a symbol called from the symbols panel and then be able to "hide" it again by clicking a close button within that symbol.
Is this possible? I'm sure it is, but sym.$("symbol").show(); and sym.$("symbol").hide(); aren't working for me–unless I'm placing them on the wrong elements. Neither is .toggle();
So basically the scenario is: I'm on a particular "slide"(png) on the stage, I click it, a symbol opens up, I click around and play animations etc., close it with a close button and keep on going with the slideshow where I was before I opened the overlaid symbol.
Again, any help would be greatly appreciated.
Cheers.

Answer 1

Hello,
Here is a case:
var mySymbol = sym.createChildSymbol("details", "Stage");
mySymbol.getSymbolElement().css({"left": "20px", "top": "20px"});
x ==> left
y ==> top