I have a click event that calls a function which makes some CSS changes (acts on Text in 3 unique text elements).  The function (below) works, but is lacking a 'restore default' function (to return the text to its original state), AND is in dire need of refactoring. Q: How can the original state of ALL text elements be restored once user clicks away from this section?Here is the partially working, ugly function: function txtResize() {        var clicked = this.id;        if (clicked == Text1)        {            $(# + clicked).css(opacity, 1);            $(#Text2, #Text3).css(opacity, 0.2);        }        else if (clicked == Text2)         {            $(# + clicked).css(opacity, 1);            $(#Text1, #Text3).css(opacity, 0.2);        }        else if (clicked == Text3)        {            $(# + clicked).css(opacity, 1);            $(#Text1, #Text2).css(opacity, 0.2);        }         // code above is ok, below does not work        else if ( !(clicked == Text1) && !(clicked == Text2) && !(clicked == Text3) )         {            $(#Text1, #Text2, #Text3).css(opacity, 1);  // return to default state        }    };UPDATE: (20 Jan) - Have improved the code, but it still somewhat clunky and involves two distinct functions.function txtResize() {        var clicked = this.id;        if (clicked === Text1 || clicked === Text2 || clicked === Text3 )         {            $(#Text1, #Text2, #Text3).animate({opacity: 0.2}, 500)            $(# + clicked).animate({opacity: 1}, 200);        }};function txtRestore(){        $(#Text1, #Text2, #Text3).animate({opacity: 1}, 1000);};
Changing text with a click event: how to restore default state of text in jQuery if/else statement
javascript;jquery;css