MooTools - Tabbed Content

Tabbed content means the content that is present in the tabbed area and that content is related to the list items. Whenever we apply any actions like hover or click to the list item, the immediate reaction will create an effect on the tabbed content.

Let us discuss more about tabs.

Creating Simple Tabs

Creating simple menu tabs helps you to explore additional information when you hover over a list item. First, create an unordered list with items, then create divs, each one corresponding to the one list item. Let us take a look at the following HTML code.

Script

<!-- here is our menu -->
<ul id = "tabs">
   <li id = "one">One</li>
   <li id = "two">Two</li>
   <li id = "three">Three</li>
   <li id = "four">Four</li>
</ul>

<!-- and here are our content divs -->
<div id = "contentone" class = "hidden">content for one</div>
<div id = "contenttwo" class = "hidden">content for two</div>
<div id = "contentthree" class = "hidden">content for three</div>
<div id = "contentfour" class = "hidden">content for four</div>

Let us provide some basic support to the above HTML code using CSS that helps in hiding the data. Take a look at the following code.

.hidden {
   display: none;
}

Let us now write a MooTools code that exhibits the tab functionality. Take a look at the following code.

Example Snippet

//here are our functions to change the styles
var showFunction = function() {
   this.setStyle('display', 'block');
}
var hideFunction = function() {
   this.setStyle('display', 'none');
}
window.addEvent('domready', function() {
   //here we turn our content elements into vars
   var elOne = $('contentone');
   var elTwo = $('contenttwo');
   var elThree = $('contentthree');
   var elFour = $('contentfour');
   //add the events to the tabs
   
   $('one').addEvents({
      //set up the events types
      //and bind the function with the variable to pass
      'mouseenter': showFunction.bind(elOne),
      'mouseleave': hideFunction.bind(elOne)
   });
   
   $('two').addEvents({
      'mouseenter': showFunction.bind(elTwo),
      'mouseleave': hideFunction.bind(elTwo)
   });
   
   $('three').addEvents({
      'mouseenter': showFunction.bind(elThree),
      'mouseleave': hideFunction.bind(elThree)
   });
   
   $('four').addEvents({
      'mouseenter': showFunction.bind(elFour),
      'mouseleave': hideFunction.bind(elFour)
   });
});

On combining the above codes, you will get the proper functionality.

Example

<!DOCTYPE html>
<html>

   <head>
      <style>
         .hidden {
            display: none;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      
      <script type = "text/javascript">
         //here are our functions to change the styles
         var showFunction = function() {
            this.setStyle('display', 'block');
         }
         
         var hideFunction = function() {
            this.setStyle('display', 'none');
         }
         
         window.addEvent('domready', function() {
            //here we turn our content elements into vars
            var elOne = $('contentone');
            var elTwo = $('contenttwo');
            var elThree = $('contentthree');
            var elFour = $('contentfour');
            //add the events to the tabs
            
            $('one').addEvents({
               //set up the events types
               //and bind the function with the variable to pass
               'mouseenter': showFunction.bind(elOne),
               'mouseleave': hideFunction.bind(elOne)
            });
            
            $('two').addEvents({
               'mouseenter': showFunction.bind(elTwo),
               'mouseleave': hideFunction.bind(elTwo)
            });
            
            $('three').addEvents({
               'mouseenter': showFunction.bind(elThree),
               'mouseleave': hideFunction.bind(elThree)
            });
            
            $('four').addEvents({
               'mouseenter': showFunction.bind(elFour),
               'mouseleave': hideFunction.bind(elFour)
            });
         });
      </script>
   </head>
   
   <body>
      <!-- here is our menu -->
      <ul id = "tabs">
         <li id = "one">One</li>
         <li id = "two">Two</li>
         <li id = "three">Three</li>
         <li id = "four">Four</li>
      </ul>
      
      <!-- and here are our content divs -->
      <div id = "contentone" class = "hidden">content for one</div>
      <div id = "contenttwo" class = "hidden">content for two</div>
      <div id = "contentthree" class = "hidden">content for three</div>
      <div id = "contentfour" class = "hidden">content for four</div>
   </body>
   
</html>

Output

Place your mouse pointer on the list item, then you will get additional info of the respective item.

Marph Content Tabs

By extending the code, we can add some morph functionality when our hidden content is displayed. We can achieve this by using Fx.Morph effect instead of styling.

Take a look at the following code.

Example

<!DOCTYPE html>
<html>

   <head>
      <style>
         .hiddenM {
            display: none;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var showFunction = function() {
            //resets all the styles before it morphs the current one
            
            $$('.hiddenM').setStyles({
               'display': 'none',
               'opacity': 0,
               'background-color': '#fff',
               'font-size': '16px'
            });
            
            //here we start the morph and set the styles to morph to
            this.start({
               'display': 'block',
               'opacity': 1,
               'background-color': '#d3715c',
               'font-size': '31px'
            });
         }
         
         window.addEvent('domready', function() {
            var elOneM = $('contentoneM');
            var elTwoM = $('contenttwoM');
            var elThreeM = $('contentthreeM');
            var elFourM = $('contentfourM');
            //creat morph object
            
            elOneM = new Fx.Morph(elOneM, {
               link: 'cancel'
            });
            
            elTwoM = new Fx.Morph(elTwoM, {
               link: 'cancel'
            });
            
            elThreeM = new Fx.Morph(elThreeM, {
               link: 'cancel'
            });
            
            elFourM = new Fx.Morph(elFourM, {
               link: 'cancel'
            });
            
            $('oneM').addEvent('click', showFunction.bind(elOneM));
            $('twoM').addEvent('click', showFunction.bind(elTwoM));
            $('threeM').addEvent('click', showFunction.bind(elThreeM));
            $('fourM').addEvent('click', showFunction.bind(elFourM));
         });
      </script>
   </head>
   
   <body>
      <!-- here is our menu -->
      <ul id = "tabs">
         <li id = "oneM">One</li>
         <li id = "twoM">Two</li>
         <li id = "threeM">Three</li>
         <li id = "fourM">Four</li>
      </ul>
      
      <!-- and here are our content divs -->
      <div id = "contentoneM" class = "hiddenM">content for one</div>
      <div id = "contenttwoM" class = "hiddenM">content for two</div>
      <div id = "contentthreeM" class = "hiddenM">content for three</div>
      <div id = "contentfourM" class = "hiddenM">content for four</div>
   </body>
   
</html>

Output

Click on any one item in the list, then you will get additional information on tabs.

Advertisements