So I have seen a few people here ask about collapsing quote/codeblock and also a few people have asked me personally about the collapsing collapsing quote/codeblock in the Devel theme. Credit goes to as you notice in the devel theme: "Authors: mmadhankumar & vintagedaddyo". Anywhoo..., credit to mmadhankumar on the "Blockquote Expand/Collapse"..., and I figured I would share since folks have asked for this and even if it is aready in a theme..., here it is for anyone needing it outside of a theme...
Edit: headerinclude
Add:
Edit: global.css
Find:
Add after:
Example:
![[Image: 125ntkg.jpg]]()
![[Image: 3310dp5.png]]()
Edit: headerinclude
Add:
Code:
<!-- Blockquote Expand/Collapse -->
<script type="text/javascript">
$(document).ready(function () {
$('blockquote').addClass('collapsed');
$('blockquote').click(function(){
$(this).toggleClass("expanded collapsed");
e.preventDefault();
});
});
</script>Edit: global.css
Find:
Code:
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;
}Add after:
Code:
.no_bottom_border {
border-bottom: 0;
}
.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;
}