JSFiddle - React, Tailwind, and code Playground

by Evan Sharp

HTML

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="clr"></div>
<br />
<button id="trigger">Find Tallest &lt;div&gt; height</button> <button id="change">Randomize heights</button> <button class="trigger">Show All</button>
<div id="max"></div>

CSS

.clr{
    clear:both;
}
.a,.b,.c,.d{
    width:40px;
    height: 40px;
    background-color:green;
    margin:10px;
    padding:10px;
    border:1px solid black;
    float:left;
}

.b{
    height:60px;
}
.c{
    height:80px;
}
.d{
    height:30px;
}

JavaScript

(function($) {
    $.fn.maxHeight = function() {
        var max = 0;
        this.each(function() {
            max = Math.max(max, $(this).height());
        });
        return max;
    };
})(jQuery);

(function($) {
    $.fn.randomHeight = function(options) {
        var settings = $.extend({
            'max': 100
        }, options);
        this.each(function() {
            $(this).animate({
                height: (Math.random() * settings.max)
            }, 1000);
        });
        return this;
    };
})(jQuery);

$("#trigger").click(function() {
    $("#max").text("The tallest div is: " + $("div").maxHeight() + "px");
});

$("#change").click(function() {
    $(".a,.b,.c,.d").randomHeight({
        max: 120
    });
});

$(".trigger").click(function() {
    $("div:hidden").show("fold");
});
$("div").live("click", function() {
    $(this).hide("fold");
});