Multiple pages in one with jQuery tabs

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

Show related articles:

Comment Form

ReviewManager

GDPR privacy disclaimer
This form will send me your email address and your IP address.
If you don't want that, don't use this form!

ReviewManager

2 Comments

19-01-2018

Jon

I'm trying to find a way to do something like what this article describes, except I want the "sub-pages" to be formatted according to the Core::Page template they are each assigned to.

Is there a way to get_page_content after it has been processed thru its Core::Page template?

09-10-2014

Karima

Hello Rolf

I'm using tabbeetab in my template.

Would your suggestion work if I wanted to dynamically load a tab between 2 existing tabs depending on the link clicked on tab 1?

I hav multiple sub pages, but the tab and the content only need appear when called. See forum post
http://forum.cmsmadesimple.org/viewtopic.php?f=28&t=71419&p=316341&e=316341

Thanks for the help

Kp

Multiple pages in one with jQuery tabs

Article optimized for CMSMS 2.x

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