Style Editor Docs
     
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
  • Home
  • Add-ons
  • Templates
    • Zion
    • Alsten
    • Lemberg
    • Bergen
    • Hafen
    • Altona
    • Enkel
    • Horten
    • Hisingen
    • Agen
    • Tjörn
    • Halmstad
    • Öland
  • Support
    • Style Switcher
    • Common Issues
    • Installation
    • Guides
    • Blog
    • Updates
    • Marketplace
    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://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.

     



    <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', 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 )

    Download
    showmore-min.js
    js File 974 Bytes
    Download
    tagPlaceholderTags:

    SUPPORT

    • Blog
    • Support center
    • Tutorials
    • Common Support issues
    • Updates

    QUICK LINKS

    • Advanced Style Editor
    • Features
    • Pricing
    • Pre Purchase Questions
    • Marketplace
    • Zødiac Framework
    • Jimdo Creator

    WIDGETS

    • Instagram feed
    • Team Showcase
    • Animations
    • Parallax widget
    • Full width widgets
    • Countdown Timer
    • All Widgets

    GET INSPIRED

    • Showcase
    • Custom widgets
    • Enterprise Package
    • No coding features
    • Matrix variables
    • Dolphin Block Elements
    hide-in-doc-page

    Showcase
    draggable-logo

     

    Main colors
       bg-primary
       bg-primary-light
       bg-primary-dark
       bg-secondary
       bg-secondary-dark
    Template sections
       body
       top-header
       header
       content
    Footer Styles
       background
       text color
       link color
       horizontal line
    Buttons
       style 1
       style 2
       style 3
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
    has-center-nav g-font
    navigation styles
    size-15 weight-400 snip-nav is-uppercase --line01
    content styles
    form-white
    footer styles
    o-form  color-white
    Typography
    Heading H1
    weight-600 is-uppercase
    Heading H2
    weight-600 is-uppercase
    Heading H3
    weight-600 is-uppercase
    Buttons
    weight-600 is-uppercase
    Animations
    none

    Note:
    All changes made here will be applied to your entire website.
    is-switcher admin-only

    MATRIX THEMES

    STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE

    About | Privacy Policy | Cookie Policy | Sitemap
    Copyright © 2022 All rights reserved
    Log in Log out | Edit
    • Scroll to top
    Close