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://cdn.jsdelivr.net/gh/loki156/zodiac/add-ons/showmore-min.js"></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.
