JSFiddle - React, Tailwind, and code Playground

Abstracting an event handler function to pass properties from an event to a specific function that does the real work.

by Admiral Potato

HTML

<div id="a" class="animate clickable">A</div>
<div id="b" class="animate clickable">B</div>

CSS

.animate{
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

.clickable{
    display: block;
    width: 64px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    cursor: pointer;
    opacity: 1;
    padding: 0;
    margin: 0 auto;
    font-size: 16px;
}
.active{
    opacity: 0.5;
    padding: 16px;
}

#a{
    background-color: #f00;
}

#a.active{
    background-color: #00f;
    color: #fff;
    font-size: 56px;
}

#b{
    background-color: #0f0;
}

#b.active{
    color: #fff;
    font-size: 24px;
}

JavaScript

var $doc = $(document),
    toggleActive = function(targetElement){
        var $target = $(targetElement);
        $target.toggleClass('active');
    },
    clickHandler = function(event){
        toggleActive(event.currentTarget);
    };

$doc.on('click', '.clickable', clickHandler);