Add `Read More` Functionality in CMS Pages

Some times, it would be great if we can add a collapse/expand functionality in CMS Pages in Magento. A perfect example would be a read more option. When we display very long documents through CMS pages, it would be nice if we shrink the content part to a small section and add a read more link bottom of it. When user clicks on that link, the content will be expanded.

We can achieve this functionality by implementing a custom extension. I will show you the steps that we need to take to achieve this. So our extension should have a name Programmerrkt_AdvancedCms.

First step is activating our module. For this add this file in etc/modules

Location : app/etc/modules/Programmerrkt_AdvancedCms.xml

Next step is to define configuration of our module. Let us do that.

Location : app/code/local/Programmerrkt/AdvancedCms/etc/config.xml

This file tells to Magento that our module has a layout file for frontend section. That's it. Our layout file is the heart of our module. It is going to hold the important parts of our module. Let us define our layout file.

Location : app/design/frontend/<.your_package>/<.your_theme>/layout/programmerrkt_advancedcms.xml

So here we defined layout for cms_page handler. Magento will look for this layout handler whenever a request for CMS page is made. So this handler would be a perfect handler for us. Next we added jquery and readmore.js in header section. Then at last we defined a template file script.phtml for holding our custom javascript code. Note that we included this template at the bottom of page.This is achieved by using the block before_body_end. This will ensure that, our custom code will invoked perfectly.

Now our script.phtml should look like this.

Location : app/design/frontend/<.yourpackag>/<.your_theme>/template/programmerrkt/advancedcms/readmore/script.phtml

As you can see readmore() method is called on an element with an id readomore-demo. So it is required that, you need to enclose all the content your cms page inside this id. Demo is shown here.

We are done. Our output will look like this.

So only thing you need to change is edit script.phtml file according to your needs.

Note: Remember you need to add jquery for proper working of this module. If you have jquery installed, then remove the code that add jquery in layout file. Also you need to download readmore.js and has to include it in skin/frontend/<.your_package/<.your_theme>/js/customjs/readmore.js. Similarly add css file in skin/frontend/<.your_package/<.your_theme>/css/customcss/readmore.css. You can use this css file to decorate links appear in your cms page.

Additional Note: readmore.js requires jquery greater than 1.7.0