JSFiddle - React, Tailwind, and code Playground

HTML

<div class="arrow"></div>

CSS

.arrow {
    background-image: url('http://placehold.it/32/ff0000');
    height: 13px;
    width: 13px;
}
.arrow.down {
    background-image: url('http://placehold.it/32/000000');
}

JavaScript

$(document).ready(function () {
    var $arrow = $('.arrow');

    $arrow.on('click', function (e) {
        e.stopPropagation();

        $arrow.toggleClass('down');

        if ($arrow.hasClass('down')) {
            //down
        } else {
            //up
        }
    });

    $(document).on('click', function () {
        $arrow.removeClass('down');
    });
});