Best way to hide symbols when they're on the stage, but invisible?

Question

I have multiple symbols linked to buttons with .click events...
The problem I'm having is that when I've animated the contents of the symbol with opacity down to zero, etc, but the symbol itself remains on the
Stage, and it blocks other layers' text from being selectible (i.e. if visitors wanna copy and paste my text, they would be unable to with that invisible symbol sitting on top of it in the layer order)
I tried to use sym.$(current).hide();   like below... (The rest of this code is for state management so that an animation will play out, and another one will play in whenever a corresponding button is clicked - it comes from here: http://blogs.adobe.com/edge/2012/07/18/tutorial-leveraging-independent-symbol-timelines/)
var current = sym.getVariable("current");
   if (current != "") {
      sym.getSymbol(current).play("out");
        sym.$(current).hide();                     //tried to use this to hide the symbol after it played "out" but it cancelled the play("out") request and just hid my symbol
sym.getSymbol("WelcomeContent").play("in");
sym.$("WelcomeContent").show();
sym.setVariable("current", "WelcomeContent");
I'm guessing that I've used .hide() in the wrong place, can someone suggest where I should put it so that all the unused symbols on the stage are hidden until their button is clicked?
Here's my SAMPLE file http://www.ruesterprod.com/edgehidesymbols/rpedgerebuild.zip
(I commented out the .hide() code on the .click events I mentioned above to show you the functionality I wanna keep)
Thanks all!
Aza

Answer 1

So, getSymbolElement() is missing.
1) One scripting:
if (current != "") { sym.getSymbol(current).play("out").getSymbolElement().hide(); }
2) Another scripting:
if (current != "") {
               sym.getSymbol(current).play("out");
               sym.getSymbol(current).getSymbolElement().hide();
               //sym.$(current).hide();