MENU

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>
  </ul>

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

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

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

</div>

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

  Working example


Advertisement


Ads help me to help you! Thanks!

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


  Comment Form

Click here to open the form


  2 Comments

CMS Made Simple - Tutorials, tips and tricks - CMSMS

Multiple pages in one with jQuery tabs

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.2.12
  Last updated: 23-06-2018
  Comments: 2
  http://cms.ms/TGZR

Advertisement


Ads help me to help you! Thanks!

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

Advertisement


Ads help me to help you! Thanks!

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