Show/hide description

Question

I'm trying to keep the code as clean as possible. Is this the best approach? I don't use jQuery that often.

// ==============================================
// Trigger longer description on product page
// ==============================================
var longDescription = $j("#js-long-description");
var shortDescription = $j("#js-shortened-description");
var showHide = $j("#js-trigger-long-description");
var inSpeed = 500;
var outSpeed = 100;

longDescription.hide();

showHide.on("click", function () {

    var buttonTxt = longDescription.is(':visible') ? 'Read More' : 'Read Less';

    showHide.text(buttonTxt);

    if (longDescription.is(':visible')) {

        shortDescription.fadeIn(inSpeed);
        longDescription.fadeOut(outSpeed);

    } else {

        shortDescription.fadeOut(outSpeed);
        longDescription.fadeIn(inSpeed);

    }
});

Answer 1

It looks pretty clean. You are saving the values into variables so to avoid re-running the query.

A minor improvement would be to use click function instead of on('click') as it more readable.

For the toggle part, one can identify 2 phases when clicking:

1. change button text
2. animate the description

If you don't need to keep them separate you can remove the ternary operator (the expr1? expr2: expr3) and do:

showHide.click( function () {
    if (longDescription.is(':visible')) {
        showHide.text('Read More');
        shortDescription.fadeIn(inSpeed);
        longDescription.fadeOut(outSpeed);
    } else {
        showHide.text('Read Less');
        shortDescription.fadeOut(outSpeed);
        longDescription.fadeIn(inSpeed);
    }
});