Home » jQuery, Magento9 December 2013

Magento: Add jQuery tabs in CMS page

You can add tabs in a CMS page in Magento. I have used jQueryUI tabs for this purpose. You can view the examples and source code of the tabs feature here: http://jqueryui.com/tabs/

Here is the step-by-step guide to create tabs on Magento CMS page:-

1. Create a CMS page (CMS -> Pages -> Add New Page). Let the CMS page title be ‘Testing’.
2. Under ‘Design’ tab, I have set the ‘Layout’ to ‘1 column’. You may set it according to your preference.
3. Under ‘Content’ tab, write the following sample code

4. Save the page
5. Add the following code in app/design/frontend/your_package/your_theme/template/page/html/head.phtml to include the jquery css and js files. I have used an if condition to include the jquery css and js page only on this particular cms page only.

Now, you should be able to view tabs on your newly created CMS page. Suppose, the URL key for your new page is set as ‘testing’, then your new page URL will be http://yourdomain.com/testing or on local machine, it will be http://127.0.0.1/yourMagentoFolder/testing. You can check the tabs there.

Hope it helps. Thanks.

Magento

Get New Post by Email

Find me on

FacebookTwitterGoogle+LinkedInRSS Feed
  • Thanks for sharing!!

  • Auto Node

    By, you gave a code is working. I am trying to add one more tabs under this. But the second tab is not working.