[For 1.8] Expandable Quotes

[Mipher]

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

[User 6029]

<-- snip -->

[WallBB]

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.

[DevLife]

Seems Awesome thanks for sharing!

[SELLECK87]

I noticed that the maximum height is 6461px. I looked in the css but it's not there because I wanted to change the px number. Where can I find it?

[HLFadmin]

Once clicked, there is nothing to shorten it again, and if the post is edited, the long quote is displayed in a short scrollable window.
A page refresh restores the Click to Expand.
Needs more work.
In my spare time. I like this simple feature.

[SELLECK87]

Once clicked, there is nothing to shorten it again, and if the post is edited, the long quote is displayed in a short scrollable window.
A page refresh restores the Click to Expand.
Needs more work.
In my spare time. I like this simple feature.

True. I noticed the same thing myself. I trust in your update 😅