JSFiddle - React, Tailwind, and code Playground

by Aliaksei_MArtsinkevich

HTML

<div class="container">
    <div class="clickable"></div>
    <div id="content">A!</div>
</div>

CSS

.container {
    background-color: red;
    height: 60px;
    width: 60px;
}

.clickable {
    background-color: blue;
    height: 10px;
    width: 60px;
}

#content {
    display: none;
    background-color: green;
    height: 20px;
    width: 60px;
}

JavaScript

$(document).ready(function () {

    $('.container').draggable({
        start: function (event, ui) {
            $(this).addClass('dragging');
        }
    });

    $('.clickable').click(function (event) {
        if ($(this).parent().hasClass('dragging')) {
            $(this).parent().removeClass('dragging');
        } else {
            $("#content").toggle();
        }
    });
});