18. November 2020

Showmore plugin with collapsible blocks

A detailed tutorial about how to use smoothly collapsed blocks in Jimdo websites.

You can use it in standard Jimdo template with Zodiac framework or in any custom layout

There are 2 examples of using showmore plugin in Jimdo websites:

1) A single module Widget/HTML with simple text;

2) Collapsing multiple modules inside the columns;

Example 01

This is a heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar, massa id dictum ornare, nulla sem tristique dui, nec interdum sapien magna at augue. Duis eros purus, sagittis in mattis placerat, pretium sit amet leo. Sed vitae consectetur lacus, et consequat erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec rhoncus lorem eget sapien maximus, quis feugiasavet mi porttitor. Suspendisse ut erat dolor. Phasellus porttitor pretium commodo. Curabitur eget venenatis quam, non tincidunt nisl. Aenean lobortis fermentum imperdiet. Maecenas nec ipsum tellus. Nunc mauris dui, iaculis vel ex sit amet, maximus ultricies diam. Morbi ut mi sed ex bibendum tempus. Quisque lobortis eget sem in dignissim. Donec scelerisque massa vitae lectus imperdiet pellentesque id id purus. Fusce ac est at mi mollis mattis.


<style>
/* <![CDATA[ */
.matrix .is-showmore{
    overflow:visible!important;
}
.has-gradient:before {
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
    bottom: 0;
    right: 0;
    left: 0;
    content: ' ';
    height: 25px;
    position: absolute;
    z-index: 1;
}
.is-showmore-btn{
   padding:10px 12px!important;
}
/*]]>*/
</style>
<div class="is-showmore has-gradient rel">
    <h1>
        This is a heading
    </h1>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar, massa id dictum ornare, nulla sem tristique dui, nec interdum sapien magna at augue. Duis eros purus, sagittis in
        mattis placerat, pretium sit amet leo. Sed vitae consectetur lacus, et consequat erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec rhoncus lorem eget sapien maximus,
        quis feugiasavet mi porttitor. Suspendisse ut erat dolor. Phasellus porttitor pretium commodo. Curabitur eget venenatis quam, non tincidunt nisl. Aenean lobortis fermentum imperdiet. Maecenas
        nec ipsum tellus. Nunc mauris dui, iaculis vel ex sit amet, maximus ultricies diam. Morbi ut mi sed ex bibendum tempus. Quisque lobortis eget sem in dignissim. Donec scelerisque massa vitae
        lectus imperdiet pellentesque id id purus. Fusce ac est at mi mollis mattis.
    </p>
</div>
<script src="https://u.jimcdn.com/cms/o/s0f15831a4aa99572/userlayout/js/showmore-min.js?t=1606568179"></script> 
<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();  
(function($) {  
// Init 
$(document).ready(function() {
// showmore plugin
$('.is-showmore').showMore({
     minheight: 74,
     buttontxtmore: 'show more',
     buttontxtless: 'show less',
     buttoncss: 'hs-button is-showmore-btn size-11',
     animationspeed: 250
 });

});
})(jQuery); 
//]]>
</script>

Example 02

This is a heading

Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Vestibulum suscipit nulla quis orci. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi.


<style>
/* <![CDATA[ */
.matrix .is-showmore{
    overflow:visible!important;
}
.has-gradient:before {
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
    bottom: 0;
    right: 0;
    left: 0;
    content: ' ';
    height: 25px;
    position: absolute;
    z-index: 1;
}
.is-showmore-btn{
   padding:10px 12px!important;
}
/*]]>*/
</style>
<script src="https://u.jimcdn.com/cms/o/s0f15831a4aa99572/userlayout/js/showmore-min.js?t=1606568179"></script> 
<script type="text/javascript">
//<![CDATA[
     jQuery.noConflict();
(function($) {
// Init
$(document).ready(function() {
// addClass to the parent columns module
 $('.j-module:has(.cc-02)').closest('.j-hgrid').addClass('is-showmore02 rel has-gradient');
// showmore plugin
  $('.is-showmore02').showMore({
     minheight: 74,
     buttontxtmore: 'show more',
     buttontxtless: 'show less',
     buttoncss: 'hs-button is-showmore-btn size-11',
     animationspeed: 250
 });
});
})(jQuery);
//]]>
</script>
<div class="cc-02">
</div>

Options

1) You can customize the text button, it's style, animation speed and min height of the block


$('.is-showmore').showMore({
     minheight: 74,
     buttontxtmore: 'show more',
     buttontxtless: 'show less',
     buttoncss: 'hs-button is-showmore-btn size-11',
     animationspeed: 250
 });

2) You can download the js plugin file and host it on your own website ( design> custom template> Files )