Multiple pages in one with jQuery tabs

  Previous article Next article  

Multiple pages in one with jQuery tabs

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 1.11.13
  Last updated: 03-04-2015
  Comments: 1

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 class="tabs">

  <ul class="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



A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  1 Comment

CMS Made Simple 2.2.2 - Tutorials, tips and tricks - CMSMS 2.2.2

Multiple pages in one with jQuery tabs

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 1.11.13
  Last updated: 03-04-2015
  Comments: 1

A2 Webhosting CMS Made Simple