# Changing text with a click event: how to restore default state of text in jQuery if/else statement

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);
};
• Perhaps the note on refactoring could be de-emphasized but the main issue is that my text does not return to its original state (two of the paragraphs remain opacity = unreadable. I want the last statement in if/else to restore text back, and figured in doing so many would point out how badly the code needs refactoring so I threw that in as well. Will edit to ensure focus is on restoring the default value of text, not refactoring. – DeBraid Jan 16 '14 at 15:22

as a first step I would rewrite the last if statement

else if ((clicked =! "Text1") && (clicked != "Text2") && (clicked != "Text3") )
{
$("#ActText, #AdaptText, #PlanText").css("opacity", "1"); // return to default state } After that you could rewrite it as a switch statement: http://www.w3schools.com/js/js_switch.asp edit : this would be better... var textArray = new Array("Text1","Text2","Text3"); if($.inArray(clicked,textArray){
$("#Text2, #Text3").css("opacity", "1"); } else {$("#" + clicked).css("opacity", "0.2");
}
• Your solution itself needs refactoring, I would use an array and $.inArray(). – undefined Jan 16 '14 at 16:19 • Thanks Blacksheep, I didn't even notice that each action in the if statements was the same. – Ruben Verschueren Jan 16 '14 at 16:46 • The text with opacity = 1 should stand alone, the other two text elements should take opacity 0.2. I think this solution has it backwards, meaning if text2 or text3 is clicked, then what? IOW, shouldn't #text2 and #text3 also be variables? – DeBraid Jan 17 '14 at 1:09 Here is an alternative. I do use that technic a lot as it shrinks the amount of code. The exec function is self invoked and returns a new function (this is closure); so the elements you want to work with are accessible in the inner function. var exec = (function() { var$el = $('#Text1, #Text2, #Text3'); //allows you to use easily .siblings later return function(id) { //closure$el.filter(function() { return this.id === id; }).css("opacity", "1");
$el.siblings().css("opacity", "0.2"); }; })(); //self invoked: it returns a new function but has access to$el

var rollback = function() {