如何将jquery readmore函数（展开/折叠）添加到magento CMS页面

Question

I need a read more button link in my Magento CMS pages.

I got some long cms texts. I need a Read More link to collapse them.

The Read More link has to be always after the first paragraph or ofter 250 character or any other limitation. But it is better when I can place the link myself in the magento backend by adding some kind of shortcode. like [readmore] or something. Doesn't matter what.

this is an example what im trying to do. http://www.feestding.nl/themakleding/beste-thema-s/halloween-kostuums/

example of the feature http://jedfoster.com/Readmore.js/

how can i do it?

Answer 1

Download readmore.js and add it into your page.xml of your template. Make sure your path is correct and you have proper jquery already in use, if not then link the jquery file as well.

    <action method="addJs"><script>readmore.js</script></action>

In backend, always put your contents inside a div with a specific class like below to make the read more link appear

    <div class="readmore">.......</div>

Depending on where you want the read more to display either in cms pages, category pages or product pages, you have to add the following readmore script accordingly in those pages. You can also add the script in your CMS pages from the editor in backend.

    <script type="text/javascript">
         jQuery('.readmore').readmore({maxHeight:40});  
    </script>

There are couple of options that we can use with readmore.js, follow the documentation here

Beware of jQuery conflicts, you might need to use noConflict() to make this readmore script work. Hope you can make this work.