MyBB Community Forums

Expandable Quotes like Xenforo with no-script support (overflow-y: scroll). This should be, at the moment, the most convenient way to achieve that.

Add in your global.css (possibly at the end):

.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;
}

Go to your footer template, add at the end:

<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>

Preview

https://imgur.com/15FzZhp

<-- snip -->

(2019-08-30, 04:51 PM)vintagedaddyo Wrote: [ -> ]Cool beans, I assume this is does the same as https://community.mybb.com/thread-206116.html ?

Yes, I believe both are same.
@OP: Good work with the plugin.

Seems Awesome thanks for sharing!