<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 extra-small-btn br5',
     animationspeed: 250
 });

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

<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://cdn.jsdelivr.net/gh/loki156/zodiac/add-ons/showmore-min.js"></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 extra-small-btn br5',
     animationspeed: 250
 });
});
})(jQuery);
//]]>
</script>
<div class="cc-02">
</div>