Multiple pages in one with jQuery tabs

  Previous article Next article  

One page showing several other pages without reloading the page. The CGSimpleSmarty module for CMS Made Simple™ will help you!

In this tutorial I use jQuery tabs, but you can also use anchors or a content toggle.

  How to use

I use jQuery tabs here, read this post how to create them: jQuery tabs.

Open Module Manager in the CMSMS admin panel and install the CGSimpleSmarty module.
With the get_page_content feature you can call the content of other content pages.

Create a page with several subpages.
In this example I gave the subpages the aliases subpage-1, subpage-2 and subpage-3. You will see them back in the code below, change these to your own page aliases.

Put the following code in the parentpage or in your HTML template.

<div id="tabs">

  <ul id="tabNavigation">
    <li class="tab-1"><a href="#tab-1">Page 1</a></li>
    <li class="tab-2"><a href="#tab-2">Page 2</a></li>
    <li class="tab-3"><a href="#tab-3">Page 3</a></li>

  <div id="tab-1">
    {cgsimple::get_page_content('subpage-1','','foo')}{eval var=$foo}

  <div id="tab-2">
    {cgsimple::get_page_content('subpage-2','','bar')}{eval var=$bar}

  <div id="tab-3">
    {cgsimple::get_page_content('subpage-3','','baz')}{eval var=$baz}


Read the CGSimpleSmarty module help for more information about the get_page_content parameters.

  Working example

Buy Me A Coffee

  Comment Form


Click here to open the form



Buy Me A Coffee

CMS Made Simple - Tutorials, Tips and Tricks - CMSMS

Multiple pages in one with jQuery tabs

  Article optimized for CMSMS 2.x

  Last tested in: CMSMS 2.2.19
  Last updated: 23-06-2018
  Comments: 2

Buy Me A Coffee


Ads help me to help you! Thanks!

Ads help me to help you! Buy products from these advertisers!