わずか数行でボックスを表示/非表示するトグルボタンを作成

これほど簡単にできてしまうなんて・・・

box = $('div');
$('button').on('click', function() {
    box.animate({
        'height': 'toggle',
        'opacity': 'toggle'
    });
});

<button>Click</button>
<div>
    <h1> Perform a custom animation of a set of CSS properties.</h1>
    <p>The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a map of CSS properties. This map is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive.</p>
    <p>All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.</p>
</div>