jQuery Tabs & AdvancedContent : a nice combination

myleen99 · **Posted:** Mon Nov 21, 2011 4:47 pm

For a while I was looking for a user friendly solution that allows non-technical contributors to add tabbed content to webpages, whitout writing specific code HTML, jQuery script, or whatever).

Thanks to a tip from Ken Griffith, I invested some time in analysing and evaluating the features and possibilities of the AdvancedContent Module. Surprisingly it contained all I needed for my solution. Here is my "tip & trick" for this. It is probably not the perfect solution, but it works for me. (sorry for the long post)

The described solution offers the possibility to add a tabbed content container to a webpage, consisting of :
* 4 tabs which can be individually edited (title; content; on/off)
* a pre-text (text paragraph shown before the tabs)
* a post-text (text paragraph shown after the tabs)

Step-by-Step :
1) I made a copy of the existing webpage template and renamed it "tabbed content"
2) I wrote some extra template code, using the parameters of the AC-module which allowed me to define the different content blocks but also to structure the layout of the backend interface in 1 go !
This code is placed in the DIV were the normal page content is shown
3) The template code was further completed with some smarty logic {if}{/if} to analyse the content blocks and HTML code to display tabbed content in the frontend as per editor settings in the backend.

The template code : (check the AC-module help file for clarification of the different parameters)

Code:

{* Tabbed Content Template layout based on AdvancedContent Module features *}
{* Content can be edited in separate pagetab in backend *}

{* Define & Assign different elements *}
   {content block='tabs_flag' block_type='checkbox' assign='tabs_flag' description='Check this box to turn on the tabs on this page.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="General" collapse="false"}
   
   {content block="pretabtext" label="Pre-Tab Container Text" assign="pretabtxt" wysiwyg="true" page_tab="Tabbed Content" block_tab="Pre/Post Text" collapse="true" description="Enter here the text that will be displayed above the Tabbed Content Container"}
   
   {content block="posttabtext" label="Post-Tab Container Text" assign="posttabtxt" wysiwyg="true" page_tab="Tabbed Content" block_tab="Pre/Post Text" collapse="false" description="Enter here the text that will be displayed below the Tabbed Content Container"}
   
   {content block='tab1_flag' label="Active ? " block_type='checkbox' assign='tab1_flag' description='Check this box to activate this panel.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 1" block_group="Panel Parameters" no_collapse="true" collapse="false"}
   {content block="tab1_title" label="Title" assign="tab1_title" wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 1" block_group="Panel Parameters" no_collapse="true" collapse="false" oneline="true"}
   {content block="tab1_content" label="Content" assign="tab1_content" wysiwyg="true" page_tab="Tabbed Content" block_tab="Panel 1" block_group="Panel Parameters" no_collapse="true" collapse="false"}
   
   {content block='tab2_flag' label="Active ? " block_type='checkbox' assign='tab2_flag' description='Check this box to activate this panel.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 2" block_group="Panel Parameters" no_collapse="true" collapse="false"}
   {content block="tab2_title" label="Title" assign="tab2_title" wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 2" block_group="Panel Parameters" no_collapse="true" collapse="false" oneline="true"}
   {content block="tab2_content" label="Content" assign="tab2_content" wysiwyg="true" page_tab="Tabbed Content" block_tab="Panel 2" block_group="Panel Parameters" no_collapse="true" collapse="false"}

   {content block='tab3_flag' label="Active ? " block_type='checkbox' assign='tab3_flag' description='Check this box to activate this panel.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 3" block_group="Panel Parameters" no_collapse="true" collapse="false"}
   {content block="tab3_title" label="Title" assign="tab3_title" wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 3" block_group="Panel Parameters" no_collapse="true" collapse="false" oneline="true"}   
   {content block="tab3_content" label="Content" assign="tab3_content" wysiwyg="true" page_tab="Tabbed Content" block_tab="Panel 3" block_group="Panel Parameters" no_collapse="true" collapse="false"}

   {content block='tab4_flag' label="Active ? " block_type='checkbox' assign='tab4_flag' description='Check this box to activate this panel.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 4" block_group="Panel Parameters" no_collapse="true" collapse="false"}
   {content block="tab4_title" label="Title" assign="tab4_title" wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 4" block_group="Panel Parameters" no_collapse="true" collapse="false" oneline="true"}   
   {content block="tab4_content" label="Content" assign="tab4_content" wysiwyg="true" page_tab="Tabbed Content" block_tab="Panel 4" block_group="Panel Parameters" no_collapse="true" collapse="false"}
{* END define & assign elements*}

{if $tabs_flag} {* check if tabs/panels container needs to be activated *}
   {if $tab1_flag or $tab2_flag or $tab3_flag or $tab4_flag}
      {* at least 1 panel must be activated inside the container to run the script *}
      {global_content name='GCB_jQs_tabs'} {* execute jQueryTools script *}
   {/if}

   {if $pretabtxt !=""}
      <p>{$pretabtxt}</p> {* Display text above container if not empty *}
   {/if}

   {if $tab1_flag or $tab2_flag or $tab3_flag or $tab4_flag}
      {* at least 1 panel must be activated inside the container to display layout *}
   
   <ul class="tabs"> {* show tabbed content container *}
      {if $tab1_flag}
         <li><a href="#tabs-1"> {* Activate panel and show title in tab *}
            {if $tab1_title !=""}
               {$tab1_title}</a>
            {else}
               Panel 1</a>
            {/if}
         </li>
      {/if}
      
      {if $tab2_flag}
         <li><a href="#tabs-2">
            {if $tab2_title !=""}
               {$tab2_title}</a>
            {else}
               Panel 2</a>
            {/if}
         </li>
      {/if}
      
      {if $tab3_flag}
         <li><a href="#tabs-2">
            {if $tab3_title !=""}
               {$tab3_title}</a>
            {else}
               Panel 3</a>
            {/if}
         </li>
      {/if}
      
      {if $tab4_flag}
         <li><a href="#tabs-4">
            {if $tab4_title !=""}
               {$tab4_title}</a>
            {else}
               Panel 4</a>
            {/if}
         </li>
      {/if}
   </ul>
   {/if}

   {if $tab1_flag or $tab2_flag or $tab3_flag or $tab4_flag}
      {* at least 1 panel must be activated inside the container to display layout *}
   <div class="panes"> {* show panels content *}
      {if $tab1_flag}
         <div id="tabs-1">
            {if $tab1_content !=""}
               {$tab1_content}
            {else}
               {* No Text Here *}
            {/if}
         </div>
      {/if}
   
      {if $tab2_flag}
         <div id="tabs-2">
            {if $tab2_content !=""}
               {$tab2_content}
            {else}
               {* No Text Here *}
            {/if}
         </div>
      {/if}

      {if $tab3_flag}
         <div id="tabs-3">
            {if $tab3_content !=""}
               {$tab3_content}
            {else}
               {* No Text Here *}
            {/if}
         </div>
      {/if}

      {if $tab4_flag}
         <div id="tabs-4">
            {if $tab4_content !=""}
               {$tab4_content}
            {else}
               {* No Text Here *}
            {/if}
         </div>
      {/if}
   </div>
   {/if}

   
   {if $posttabtxt !=""}
      <p>{$posttabtxt}</p> {* Display text below container if not empty *}
   {/if}
   
{/if} {* END of tab flag check *}

{* END of Tabbed Content template block *}

4) the jQuery script to show the tabs is included in a Global Content Block. The script was called externally as the CMS jQueryTools module does not contain the Tabs functionallity

the Global Content Block :

Code:

{literal} <!-- Call jQuery Library + ALL jQuery Tools -->
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript">

$(function() {
   $("ul.tabs").tabs("div.panes > div", {
      effect: 'fade',
      onBeforeClick: function(event, i) {
         // get the pane to be opened
         var pane = this.getPanes().eq(i);
         // only load once. remove the if ( ... ){ } clause if you want the page to be loaded every time
         if (pane.is(":empty")) {
            // load it with a page specified in the tab's href attribute
            pane.load(this.getTabs().eq(i).attr("href"));
         }
      }
   });
});
</script>
{/literal}

5) specific CSS page was created and added to the template page for a nice look of the tabs. You will also notice that CSS-sprites technique is used to show the tab picture.

Code:

/* root element for tabs  */
ul.tabs { 
   list-style:none; 
   margin:0 !important; 
   padding:0;   
   border-bottom:1px solid #666;   
   height:30px;
        list-style-type: none !important;
}

/* single tab */
ul.tabs li { 
   float:left;    
   text-indent:0;
   padding:0;
   margin:0 !important;
   list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
   background: url([[root_url]]/uploads/images/icon/blue.png) no-repeat -420px 0;
   font-size:11px;
   display:block;
   height: 30px;  
   line-height:30px;
   width: 134px;
   text-align:center;   
   text-decoration:none;
   color:#333;
   padding:0px;
   margin:0px;   
   position:relative;
   top:1px;
}

ul.tabs a:active {
   outline:none;   
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
   background-position: -420px -31px;   
   color:#fff;   
}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
   background-position: -420px -62px;      
   cursor:default !important; 
   color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.s       { background-position: -553px 0; width:81px; }
ul.tabs a.s:hover { background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l    { background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover    { background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }


/* width 3 */
ul.tabs a.xl    { background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover { background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }


/* initially all panes are hidden */ 
.panes .pane {
   display:none;      
}

/* tab pane styling */
.panes div {
   display:none;      
   padding:15px 10px;
   border:1px solid #999;
   border-top:0;
   
   font-size:12px;
   background-color:#fff;
}

6) Creating page content :
* Set the content type to "Advanced Content"
* Set the page template to "Tabbed Content"
-> you get the extra interface in the page editing backend, containing the checkboxes & contentblocks of the tabbed container element

I'm not a professional webdeveloper, so this solution has a trial & error development path. It contains copy/paste code elements that I've found on different websites covering the use of jQueryTools.
Unfortunately I can't recall the people of whom I've used the code snippets (jQuery script and CSS). Sorry for that.

I hope this will help other people to integrate tabbed content in their website and to further improve this solution.
Kind Regards
Dirk

Wishbone · **Joined:** Tue Dec 23, 2008 8:39 pm **Posts:** 1321

Great tutorial! I used to use AdvancedContent exclusively. Now when I need checkboxes, I just use CGContentUtilities, which I find to be less overhead, which should also work for the purpose of this tutorial.

One issue (not a CGContentUtils issue, but a CMSMS one) is that all blocks defined by {cms_content} show up at the end when editing a page, and not mixed among the regular {content} blocks in the order specified.

AdvancedContent does give more control and more content types, so I use it on occasion when I need it.

applejack · **Posted:** Sat Dec 03, 2011 2:21 am

Another way of setting up tabbed content using jQuery UI which is used for a set of pages and children where the top levels are the tabs and the rest the panel content using CGSimpleSmarty to pull in the content.

See these as examples.

http://www.essenza.co.uk/menus/a-la-carte/
http://www.essenza.co.uk/wine/

Each individual item on the menu is a separate page which has the advantage that it is easy for a client to re-order the position of any item.

Global content block below.

Code:

<div id="rotate">
{assign var='count' value='1'}
<ol>
{foreach from=$cgsimple->get_children('a-la-carte','0',$children) item='child'}
   
    <li><a href="/a-la-carte#tabs-{$count++}"><span>{$cgsimple->get_page_title($child.alias)}</span></a></li>
{/foreach}
</ol>

{assign var='count' value='1'}
{foreach from=$cgsimple->get_children('a-la-carte','0',$children) item='child'}
<div id="tabs-{$count++}">
<p>


<table class="table-menus">
<tr class="menus-titles"><td colspan="2">
{$cgsimple->get_page_title($child.alias)}
</td></tr>
{foreach from=$cgsimple->get_children($child.alias,'0',$children) item='child'}
<tr><td class="td-first">
<span class="bold">{$cgsimple->get_page_title($child.alias)}</span><br />
{$cgsimple->get_page_content($child.alias)}<br />
</td><td valign="bottom" class="td-price">
{$cgsimple->get_page_content($child.alias,'Price')}
</td></tr>
{/foreach}
</table>

</p>
</div>
{/foreach}
</div>

twwitt · **Posted:** Mon Mar 05, 2012 9:36 pm

Nice tutorial

twwitt · **Posted:** Tue Jun 19, 2012 8:14 pm

Great tutorial.

I'm having a weird thing happen in one of my tabbed content areas.

I have inserted a script in there (that should display a news feed hosted elsewhere) that won't show up. I know the script works because when I embed it onto a regular page, it shows up fine; but not in the tabbed content area. It's weird, because in another one of the tabbed panes (tab #2) I have a different news feed and that one shows up fine.

Any ideas? See: http://test.scsynod.com/ (tab #3).

soportepro · **Joined:** Fri Nov 04, 2011 10:10 pm **Posts:** 28

Hello, very nice Tip.

I m trying to do this with 1.11 release with simplex template.

In admin area all looks very good.

In the webpage I see tabs, but and if you clic over, this send you to the main page.

I thing that this was not tested in 1.11 (superCMS) but sound great to use in it.
If I use a minimal template all works ok.

This is my testing page:

http://www.accesoexpress.mx/index.php?p ... xico-ambar

Any help or comment?

Thanks in advance

Jean le Chauve · **Posted:** Tue Aug 07, 2012 8:44 am

You call in the head : <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"> </script>
then before </body>
<script type="text/javascript" src="http://www.accesoexpress.mx/lib/jquery/js/jquery-1.7.2.min.js"></script>

Call JQuery only 1 time

soportepro · **Joined:** Fri Nov 04, 2011 10:10 pm **Posts:** 28

Thanks (Merci).

Allways your help is appreciated.

carasmo · **Posted:** Wed Aug 08, 2012 3:54 am

Why not use Listit2? You could just enter each tab heading, then text, load image, all that jazz and put the module on the page.

soportepro · **Joined:** Fri Nov 04, 2011 10:10 pm **Posts:** 28

Thanks for Listit tip. I like to have more than one options, like your suggestion.

I find something rare with this Jquery Tabs, that do not show smarty tags results inside tab contents... (see atached image) Any solution?

Testing URL:
http://www.accesoexpress.mx/index.php?p ... xico-ambar

This is in order to let this Tip more useful.

kendo451 · **Posted:** Wed Aug 08, 2012 2:39 pm

Very nice work, myleen! Would you mind if I used this as an example tutorial for the newsletter?

carasmo · **Posted:** Wed Aug 08, 2012 3:43 pm

The form is showing up in the html on the page, you need to check the source code or use http://chrispederick.com/work/web-developer/ for chrome and/or firefox.

Probably a css issue, your form is inline or the pane is not clearing. Try adding a

Code:

below the call to the module

Though I can't be sure. It's not a CMSMS issue, it's a css or html issue. Also, you've got 39 errors. It's always good to validate to make sure you have no unenclosed divs and other strange things.

Jean le Chauve · **Posted:** Wed Aug 08, 2012 4:26 pm

I think this is a JS problem for nested divs. Test with firebug and you can see that all internal divs are in display:none.
Here are other solutions for tabbed pages :
with js : http://www.stunicholls.com/various/tabbed_pages.html
only css : http://www.cssplay.co.uk/menu/one_pagev2.html

carasmo · **Posted:** Wed Aug 08, 2012 4:47 pm

Yep, that would be it. I think that there's only one div inside pane with that script. Been a long time since using it, there's easier scripts that don't require so much overhead. Here's a small one that won't require a lot of set up

http://gazpo.com/2012/05/jquery-tabs/

Yes, the contact tab, all things inside a div don't show.

Dr.CSS · **Posted:** Wed Aug 08, 2012 6:44 pm

I'm surprised any of your jquery/scripts work as you have the main jQuery called twice...

You really need to clean up your HTML before going any farther...

jQuery Tabs & AdvancedContent : a nice combination

Who is online