Increasing visible text with on-click "read more"

What can I do better?

$(function () {
    "use strict";

    /*
     *  Header text. Vergroot de tekst door op lees meer te klikken
     */
    var heading = $(".header .text h2").height(),
        firstP = $(".header p:first").height(),
        areaSmall = heading + firstP,
        areaBig = $(".header .text").height(),
        box = $(".header .text"),
        readmore = $('.header .text a[title*="meer"]'),
        closeBox = $('.header .text a[title*="Sluit"]');

    $(".header .text").css({ height: areaSmall });

    readmore.click(function () {
        $(".header .text").animate({ height: areaBig }, 1000, "easeInQuart", function () {
            $(".header .text p").css({ visibility: "visible" });
        });
    });

    closeBox.click(function () {
        $(".header .text").animate({ height: areaSmall }, 1000, "easeOutQuart", function () {
            $(".header .text p").css({ visibility: "hidden" });
            $(".header .text p:first").css({ visibility: "visible" });
        });
    });

});

You have lots of calls to $(".header .text"), which you can replace with calls to box:

var areaBig = box.height();

Similarly, you can simplify calls to selectors within box, such as:

// Better than: readmore = $('.header .text a[title*="meer"]')
var readmore = box.find('a[title*="meer"]');

// Better than: $(".header .text").animate(...
box.animate({ height: areaBig }, 1000, "easeInQuart", function () {
  box.find("p").css({ visibility: "visible" });
});

These changes will not only make the code easier to read but also increase execution speed.

StackExchange Code Review Q#5802, answer score: 2