1.8 Expand long quotes

[bekircem]

I use version from @Rakes - works fine for everything.

Rakes version works great with nested multiquote. Thank you again.

[sanjay303]

@Rakes solution is best ( post no 25, https://community.mybb.com/thread-163907...pid1132430) , However It miss the "Show less" option.
Has someone has add that feature in Rakes solution ? @Eldenroot ?

[Eldenroot]

there is a working example few pages back

[sanjay303]

I saw them one of them is not working for multiple quotes, while other requires to edit template or code to add surrounding div with specific class.

[albano]

So just add these css into global.css and script into header?

Hi,

I'm still "fairly" new to getting my hands "dirty" and customizing my forum. Can you be more specific as to where "header" is, please?

[Eldenroot]

ACP -> Themes and Templates -> Your theme -> headerinclude template

[albano]

ACP -> Themes and Templates -> Your theme -> headerinclude template

 I dare to say that per https://community.mybb.com/thread-213518...pid1286307 the path from fresh 1.8.x installs is

ACP -> Templates and Styles -> Templates -> <your template> -> Ungrouped Templates -> headerinclude

[Lunorian]

This feature is LONG OVERDUE.

[Alhimika]

Hi!
Sorry for necro posting, but I'm trying to implement the same thing

Rakes version vorks fine , but mmadhankumar version not.

either code warapped around <script type="text/javascript"> and inserted into header include

What Am I missing with mmadhankumar verion?

Thanks

---

sorted since decided to use Rakes version

[censor_deeznutz]

Hi!
Sorry for necro posting, but I'm trying to implement the same thing

Rakes version vorks fine , but mmadhankumar version not.

either code warapped around <script type="text/javascript"> and inserted into header include

What Am I missing with mmadhankumar verion?

Thanks

---

sorted since decided to use Rakes version

did you add the correct styling to global.css as well as the headerinclude snippet inclusion? * note: this is taken directly from the old devel theme that contained such back in the day since you said you were having trouble as I wanted to show you simply that it does indeed work....


ie:





add to headerinclude template:

<!-- Blockquote Expand/Collapse -->
<script type="text/javascript">
$(document).ready(function () {
    $('blockquote').addClass('collapsed');
        $('blockquote').click(function(){
        $(this).toggleClass("expanded collapsed");
        e.preventDefault();
    });
});
</script>

in global.css find:

blockquote {
 border: 1px solid #ccc;
 margin: 0;
 background: #fff;
 padding: 10px;
}

blockquote cite {
 font-weight: bold;
 border-bottom: 1px solid #ccc;
 font-style: normal;
 display: block;
 padding-bottom: 3px;
 margin: 0 0 10px 0;
}

blockquote cite > span {
 float: right;
 font-weight: normal;
 font-size: 12px;
 color: #666;
}

blockquote cite span.highlight {
 float: none;
 font-weight: bold;
 padding-bottom: 0;
}

.codeblock {
 background: #fff;
 border: 1px solid #ccc;
 padding: 10px;
}

.codeblock .title {
 border-bottom: 1px solid #ccc;
 font-weight: bold;
 padding-bottom: 3px;
 margin: 0 0 10px 0;
}

.codeblock code {
 overflow: auto;
 height: auto;
 max-height: 200px;
 display: block;
 font-family: Monaco, Consolas, Courier, monospace;
 font-size: 13px;
}

change to:

blockquote {
	border: 1px solid #ccc;
	margin: 0;
	background: #fff;
	padding: 10px;
}
blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-style: normal;
	display: block;
	padding-bottom: 3px;
	margin: 0 0 10px 0;
}
blockquote cite span {
	float: right;
	font-weight: normal;
	font-size: 12px;
	color: #666;
}
blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}
.codeblock {
	background: #fff;
	border: 1px solid #ccc;
	padding: 10px;
}
.codeblock .title {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	padding-bottom: 3px;
	margin: 0 0 10px 0;
}
.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

.collapsed, .expanded {
	overflow: hidden;
	border: 1px solid #D3D3D3;
	background: #FAFAFA;
	text-align: justify;
	padding: 10px;
	border-radius: 5px;
	margin: 0;
	position: relative;
}
.collapsed {
	max-height: 75px;
	opacity: 0.7;
}
.expanded {
	height: 100%;
	opacity: 1;
	padding-bottom: 35px;
}
.collapsed:after, .expanded:after {
	position: absolute;
	height: 25px;
	bottom: 0px;
	left: 1px;
	right: 1px;
	cursor: pointer;
	border: 1px solid #A5A5A5;
	background: #D3D3D3;
	color: #4A4A4A;
	text-align: center;
	line-height: 25px;
	font-weight: bold;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
	border-radius: 0px 0px 5px 5px;
}
.collapsed:after {
	content: 'Show More';
	opacity: 0.9;
}
.expanded:after {
	content: 'Show Less';
	opacity: 0.7;
}
.collapsed:hover:after, .expanded:hover:after {
	opacity: 1;
	background: #838383;
	color: #1A1A1A;
}

That should get it working for you...

* Now as far as say folks hoping for this as a core feature as this thread subject entails, in my opinion one factor to consider is that it would firstly need to be modified to localize the button lang (ie: show less & more ) before considering such....

Best of Luck   ~ V