MyBB Community Forums
[For 1.8] Expandable Quotes - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [For 1.8] Expandable Quotes (/thread-224449.html)

Expandable Quotes - Mipher - 2019-08-29

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

RE: Expandable Quotes - User 6029 - 2019-08-30

<-- snip -->

RE: Expandable Quotes - WallBB - 2019-08-30

(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. Smile
@OP: Good work with the plugin.

RE: Expandable Quotes - DevLife - 2019-08-30

Seems Awesome thanks for sharing!

RE: Expandable Quotes - SELLECK87 - 2024-06-30

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?

RE: Expandable Quotes - HLFadmin - 2024-06-30

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.

RE: Expandable Quotes - SELLECK87 - 2024-06-30

(2024-06-30, 04:12 PM)HLFadmin Wrote: 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 😅