Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] [Tutorial] Blockquote Expand/Collapse (reposted)
#1
Information 
[Tutorial] Blockquote Expand/Collapse (reposted) ** ( re-posted due to numerous user requests and complaints after I deleted my old tutorials. )


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:

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

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:

.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;
}
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)