JSFiddle - React, Tailwind, and code Playground

HTML

<div class="no-stop">
    <h1>Call without <code>.stop()</code></h1>

    <button>slide</button>
    <div class="toggleElement"></div>
</div>

<div class="with-arguments">
    <h1>Call to <code>.stop(true, true)</code></h1>

    <button>slide</button>
    <div class="toggleElement"></div>
</div>

<div class="without-arguments">
    <h1>Call to <code>.stop()</code></h1>

    <button>slide</button>
    <div class="toggleElement"></div>
</div>

CSS

.without-arguments {
    margin: 0 auto;
    width: 30%;
}

.with-arguments {
    float: right;
    width: 30%;
}

.no-stop {
    float: left;
    width: 30%;
}

.toggleElement {
    height: 200px;
    background-color: orange;
}

JavaScript

$(
    function () {
        $('button').click(
            function () {
                var $element = $(this);
                var $animatedBox = $element.next();

                if ($element.parent().hasClass("with-arguments"))
                {
                    $animatedBox.stop(true, true);
                }
                else if ($element.parent().hasClass("without-arguments"))
                {
                    $animatedBox.stop();
                }
                
                $animatedBox.slideToggle();
            }
        );
    }
);