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



  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.8
  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! Thanks!

Ads help me to help you! Thanks!