.mycode_quote {
    position: relative;
    overflow-y: auto;
    max-height: 200px;
    transition: max-height 500ms ease-in-out;
}

.quote__expand {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to bottom, rgba(249,250,250,0) 0%, #f9fafa 60%);
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    text-align: center;
    height: 75px;
    cursor: pointer;
}

.quote__expand span {
    position: absolute;
    bottom: 10px; left: 0; right: 0;
}

<script>
const bbCodeQuoteExpandHtml = '<div class="quote__expand"><span>Click to expand...</span></div>';

const bbCodeQuotes = $('.mycode_quote');
bbCodeQuotes.each(function() {
    if ($(this).parent('.mycode_quote').length) {
        return $(this).css('max-height', 'initial');
    }

    if (this.scrollHeight > this.clientHeight) {
        return $(this).css('overflow', 'hidden').append(bbCodeQuoteExpandHtml)
    }
})

const bbCodeQuoteExpand = $('.quote__expand');
bbCodeQuoteExpand.on('click', function() {
    const bbCodeQuote = $(this).parent('.mycode_quote');

    $(this).remove();
    bbCodeQuote.css('max-height', bbCodeQuote.prop('scrollHeight'));
})
</script>