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!
Multiple pages in one with jQuery tabs
Previous article Next articleOne 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.
<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
ReviewManager
ReviewManager
2 Comments
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?
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