Tabbed content using jQuery

  Previous article Next article  

Tabbed content using jQuery

  Article optimized for CMSMS 2.x

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

Tabbed content is a great way to have much content on a page (which might be SEO-friendly). I used it for a multilingual solution at my PTS website. I will show you how easy it is to add them to a CMS Made Simple template.

  How to use

This feature uses jQuery, so to start you need to call the jQuery library in your template. If you already have it there because another module uses it, you don't need to add it twice!

Add this little jQuery code to your CMSMS template:

{cms_jquery}

<script type="text/javascript">
  $(function () {
    var tabContainers = $('div.tabs > div');
    tabContainers.hide().filter(':first').show();
     
    $('div.tabs ul.tabNavigation a').click(function () {
      tabContainers.hide();
      tabContainers.filter(this.hash).show();
      $('div.tabs ul.tabNavigation a').removeClass('selected');
      $(this).addClass('selected');
      return false;
    } ).filter(':first').click();
  } );
</script>

In your template you can create content blocks and the tabs like this:

{content assign='content_tab1' label='Content Tab 1'}
{content block='content_tab2' assign='content_tab2' label='Content Tab 2'}
{content block='content_tab3' assign='content_tab3' label='Content Tab 3'}

<div class="tabs">
  <ul class="tabNavigation">
    <li class="tab-1"><a href="#tab-1"> 1 </a></li>
    <li class="tab-2"><a href="#tab-2"> 2 </a></li>
    <li class="tab-3"><a href="#tab-3"> 3 </a></li>
  </ul>
     
  <div id="tab-1">{$content_tab1}</div>
  <div id="tab-2">{$content_tab2}</div>
  <div id="tab-3">{$content_tab3}</div>
</div>

But you can also put hardcoded content or global content blocks in the tabs...


Sample stylesheet:

ul.tabNavigation {
  padding: 0 0 0 10px;
  width: 99%;
  height: 22px;
}

ul.tabNavigation li {
  height: 22px;
  float: left;
  margin: 0 0 0 10px;
  list-style-type: none;
}

ul.tabNavigation li a {
  height: 9px;
  padding: 3px 3px 9px 3px;
  text-decoration: none;
  color: #333;
 display: block;
  border: #ccc solid 1px;
 font-size: 10px;
}

ul.tabNavigation li a.selected {
  border-top: #999 solid 1px;
 border-left: #999 solid 1px;
 border-bottom: #fff solid 1px;
 border-right: #999 solid 1px;
 outline: none;
}

#tab-1,
#tab-2,
#tab-3 {
 padding: 10px;
  border: #ccc solid 1px;
}

  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 ]


  0 Comments

No comments yet...

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

Tabbed content using jQuery

  Article optimized for CMSMS 2.x

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

A2 Webhosting CMS Made Simple