If you do not want perform the operation based on visibility, add a class to the rectangle when clicked and remove it when clicked on "X"
This class can be used to perform the operation
Click handler for Rectangle2 will be
if(!sym.$( "Rectangle2" ).hasClass( "clicked" ))
{
sym.play("play");
sym.$("Text").show();
sym.$("mail_icon").show();
sym.$("Rectangle2").css("cursor","default");
sym.$( "Rectangle2" ).addClass( "clicked" )
}
Click handler for Text will be
sym.playReverse("mailout");
sym.$("Text").hide();
sym.$("mail_icon").hide();
sym.$("Rectangle2").css("cursor","pointer");
sym.$( "Rectangle2" ).removeClass( "clicked" );
Both the techniques work.