MooTools – Tabbed Content


MooTools – Tabbed Content

”;


Previous

Next

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.