Tabbed content

From MODx Wiki

Jump to: navigation, search

Short tutorial on how to achieve a tabbed effect such as seen on http://www.jadralniklub-burja.si/index.php?id=13

This tutorial uses a few basic things like CSS styling, HTML structuring and some javascript. In this example we'll set up three tabs for three different pages.

Contents

[edit]

HTML structure

[edit]

Create placeholders

We split the content in two basic parts: navigation (tabs) and data (pages). We use div elements and set the id attribute to both. We add an extra wrapper, so we can style only specific elements. 

  1. <div id="tabs">
  2.  
  3.   <div id="nav">
  4.   </div>
  5.  
  6.   <div id="data">
  7.   </div>
  8.  
  9. </div>
[edit]

Create tabs

We create navigation tabs as list items and we create different divs for data pages: 

  1. <div id="tabs">
  2.   <div id="nav">
  4.       <li>Tab one</li>
  5.       <li>Tab two</li>
  6.       <li>Tab three</li>
  7.     </ul>
  8.   </div>
  9.   <div id="data">
  10.     <div id="one">
  11.       Page one
  12.     </div>
  13.     <div id="two">
  14.       Page two
  15.     </div>
  16.     <div id="three">
  17.       Page three
  18.     </div>
  19.   </div>
  20. </div>

Now we are ready with the HTML structure and we must style the pages a bit. This is the current look:

Image:Tabs1.png


[edit]

CSS styling

[edit]

Style the tabs

  1. #tabs {
  2.   padding: 10px;
  3. }
  4.  
  5. #tabs #nav {
  6.  margin-bottom: 0px;
  7.  margin-left: 8px;
  8. }
  9.  
  10. #tabs ul {
  11.   list-style: none;
  12.   margin: 0px;
  13.   padding: 0px;
  14. }
  15.  
  16. #tabs #nav ul li {
  17.   display: inline;	
  18.   padding: 3px 7px;
  19.   cursor: default;
  20.   background-color: #eeeeee;	
  21.   border: 1px solid #cccccc;
  22.   border-bottom: none;
  23.   margin-right: 2px;
  24. }

Current look:

Image:Tabs2.png

[edit]

Style active tabs and hovering effect

When a page is selected, the active tab will be "in front". 

  1. #tabs #nav ul li.active {
  2.   border: 1px solid #000066;
  3.   border-bottom: 1px solid white;
  4.   background-color: #ffffff;	
  5. }

When we hover over an unselected tab, create an effect. 

  1. #tabs #nav ul li:hover {
  2.   background-color: #ffffff;
  3. }
[edit]

Style the pages

  1. #tabs #data {
  2.   margin-top: 3px;
  3. }
  4.  
  5. #tabs #data div {
  6.   display: no+ne;
  7.   border: 1px solid #000066;
  8.   padding: 10px;
  9. }
  10.  
  11. #tabs #data div.active {
  12.   display: block;
  13. }

All pages will be hidden when the page loads, except for the first one. So we mark it as active with a special class. We also mark the first tab as active the same way. 

  1. <li class="active">Tab one</li>
  2.     ....
  3.     <div id="one" class="active">
  4.       Page one
  5.     </div>
  6.     .....
[edit]

Current state

Image:Tabs3.png

[edit]

Respond to clicks

We have the content ready, now let's add some dynamics to the page.

[edit]

Create javascript functions

We need the functions for:

  • set all tabs as inactive
  • hide all pages
  • show only active page

We insert the following javascript functions info our HTML code. The standards prefer if we do this in the <head> section. 

  1. <script type="text/javascript" language="javascript">
  2. function navAllInactive() {
  3.   oNav = document.getElementById('nav');
  4.   oLis = oNav.getElementsByTagName('LI');
  5.  
  6.   for (i = 0; i < oLis.length; i++) {
  7.     oLis[i].className = '';
  8.   }
  9. }
  10.  
  11. function hideAllData() {
  12.   oData = document.getElementById('data');
  13.   oDivs = oData.getElementsByTagName('DIV');
  14.  
  15.   for (i = 0; i < oDivs.length; i++) {
  16.     oDivs[i].style.display = 'none';
  17.   }
  18. }
  19.  
  20. function doShow(o, pageId) {
  21.   hideAllData();
  22.   navAllInactive();
  23.   o.className = 'active';
  24.   oData = document.getElementById(pageId);
  25.   oData.style.display = 'block';
  26.  
  27.   return false;
  28. }
  29. </script>
[edit]

Make clicks work

Let's link the functions with the html elements.

Whenever you click on a tab, the following chain of events should happen:

  • hide all pages
  • mark all tabs as inactive
  • show only target page
  • mark clicked tab as active
[edit]

Respond to click

Link every tab with a specific page. (code snippet) 

  1. <div id="nav">
  3.     <li onclick="javascript:doShow(this, 'one');" class="active">Tab one</li>
  4.     <li onclick="javascript:doShow(this, 'two');">Tab two</li>
  5.     <li onclick="javascript:doShow(this, 'three');">Tab three</li>
  6.   </ul>
  7. </div>
[edit]

That's it

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Tabs</title>
  7. #tabs {
  8.   padding: 10px;
  9. }
  10.  
  11. #tabs #nav {
  12.  margin-bottom: 0px;
  13.  margin-left: 8px;
  14. }
  15.  
  16. #tabs ul {
  17.   list-style: none;
  18.   margin: 0px;
  19.   padding: 0px;
  20. }
  21.  
  22. #tabs #nav ul li {
  23.   display: inline;	
  24.   padding: 3px 7px;
  25.   cursor: default;
  26.   background-color: #eeeeee;	
  27.   border: 1px solid #cccccc;
  28.   border-bottom: none;
  29.   margin-right: 2px;
  30. }
  31.  
  32. #tabs #nav ul li.active {
  33.   border: 1px solid #000066;
  34.   border-bottom: 1px solid white;
  35.   background-color: #ffffff;	
  36. }
  37.  
  38. #tabs #nav ul li:hover {
  39.   background-color: #ffffff;
  40. }
  41.  
  42. #tabs #data {
  43.   margin-top: 3px;
  44. }
  45.  
  46. #tabs #data div {
  47.   display: no+ne;
  48.   border: 1px solid #000066;
  49.   padding: 10px;
  50. }
  51.  
  52. #tabs #data div.active {
  53.   display: block;
  54. }
  55. </style>
  56.  
  57. <script type="text/javascript" language="javascript">
  58. function navAllInactive() {
  59.   oNav = document.getElementById('nav');
  60.   oLis = oNav.getElementsByTagName('LI');
  61.  
  62.   for (i = 0; i < oLis.length; i++) {
  63.     oLis[i].className = '';
  64.   }
  65. }
  66.  
  67. function hideAllData() {
  68.   oData = document.getElementById('data');
  69.   oDivs = oData.getElementsByTagName('DIV');
  70.  
  71.   for (i = 0; i < oDivs.length; i++) {
  72.     oDivs[i].style.display = 'none';
  73.   }
  74. }
  75.  
  76. function doShow(o, pageId) {
  77.   hideAllData();
  78.   navAllInactive();
  79.   o.className = 'active';
  80.   oData = document.getElementById(pageId);
  81.   oData.style.display = 'block';
  82.  
  83.   return false;
  84. }
  85. </script>
  86. </head>
  88. <div id="tabs">
  89.   <div id="nav">
  91.       <li onclick="javascript:doShow(this, 'one');" class="active">Tab one</li>
  92.       <li onclick="javascript:doShow(this, 'two');">Tab two</li>
  93.       <li onclick="javascript:doShow(this, 'three');">Tab three</li>
  94.     </ul>
  95.   </div>
  96.   <div id="data">
  97.     <div id="one" class="active"> Page one </div>
  98.     <div id="two"> Page two </div>
  99.     <div id="three"> Page three </div>
  100.   </div>
  101. </div>
  102. </body>
  103. </html>
[edit]

Tips

  1. Edit pages and only later add the display: no+ne attribute to #tabs #data div.
  2. Store your page content to chunks for better readability.

The code would look like this: 

  1. <div id="data">
  2.   <div id="one" class="active">{{tabsPageOne}}</div>
  3.   <div id="two">{{tabsPageTwo}}</div>
  4.   <div id="three">{{tabsPageThree}}</div>
  5. </div>


[edit]

!!! IMPORTANT !!!

In the code above there is a CSS style for #tabs #data div which containts word "none", divided by a plus sign (+). It is there because of the wiki spam filter! Remove it when trying the code out in your browser!

Retrieved from "http://wiki.modxcms.com/index.php/Tabbed_content"
Personal tools