https://www.stevenscreektrail.org/Scripts/fade-toggle.js

1    // DOM Ready
2    $(function() {
3  
4      var $el, $ps, $up, totalHeight;
5  
6      $(".fadeout-box .button").click(function() {
7        // IE 7 doesn't even get this far. I didn't feel like dicking with it.
8        totalHeight = 0
9        $el = $(this);
10        $p  = $el.parent();
11        $up = $p.parent();
12        $ps = $up.find("p:not('.read-more')");
13  
14        // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
15        $ps.each(function() {
16          totalHeight += $(this).outerHeight();
17          // FAIL totalHeight += $(this).css("margin-bottom");
18        });
19
20        $up
21          .css({
22            // Set height to prevent instant jumpdown when max height is removed
23            "height": $up.height(),
24            "max-height": 9999
25          })
26          .animate({
27            "height": totalHeight
28          })
29          .click(function() {
30            // After expanding, click paragraph to revert to original state
31            $p.fadeIn();
32            $up.animate({
33              "height": 75
34            });
35          });
36
37        // fade out read-more
38        $p.fadeOut();
39
40        // prevent jump-down
41        return false;
42
43      });
44
45    });