/Main_Page

::You must have ninja focus to complete your mission::NinjaFocus::

Accessible Javascript Tabs

Views:

(Redirected from Javascript Tabs)


This is an example of how to create a tabbed display in html and javascript. It's accessible and progressive. It's not the most beautiful markup but it works! With css you can make it look at pretty as you want (See?).

It uses the Javascript_Utility_Class and there is a working demo here - http://www.ninjafocus.net/demos/tabs/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<!-- Copyright Kieran Whitbread 2009 -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	
<style type="text/css">

/* VAGUELY FANCY CSS */
div.clear {
    display:block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
}
div.tabBlockActive ul.tabs {
    width:628px;
    background-color:white;
    padding:0;
    /*margin:0 0 -1px;*/
    margin:0;
    height:37px;
    border-bottom:1px solid green;
}
div.tabBlockActive li.tab {
    display:inline-block;
    margin:0;
    padding:0;
    background:green;
    height:38px;
    border:none;
}

div.tabBlockActive a.tab {
    color:white;
    background:gray;
    text-transform:uppercase;
    display:block;
    border-top:1px solid gray;
    border-left:1px solid gray;
    border-right:1px solid gray;
    border-bottom:1px solid black;
    padding:0 1em;
    height:36px;
    margin:0;
}
div.tabBlockActive ul.tabs a.active {
    font-weight:bold;
    background:white;
    color:black;
    border-top:1px solid black;
    border-left:1px solid black;
    border-right:1px solid black;
    border-bottom:1px solid white;
}
div.tabBlockActive div.tab {
    position:relative;
    display:none;
    width:628px;
    border-top:none;
    border-left:1px solid black;
    border-right:1px solid black;
    border-bottom:1px solid black;
    /*margin-top:-1px;*/
    padding-top:1em;
}
div.tabBlockActive div.tab h3.anchor {
    width:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    float:none !important;
    text-indent:-1000px !important;
    max-height:0 !important;
    max-width:0 !important;
}

/* BASIC CSS */

/*
div.tabBlock div.clear {
    width:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    float:none !important;
    text-indent:-1000px !important;
    max-height:0 !important;
    max-width:0 !important;
}
div.tabBlockActive ul.tabs {
    background-color:white;
    padding:0;
    margin:0;
}
div.tabBlockActive li.tab {
    display:-moz-inline-box;
    display:inline-block;
    margin:0;
    padding:0;
}
div.tabBlockActive a.tab {
    display:block;
    margin:0;
    padding:0;
}
div.tabBlockActive ul.tabs a.active {
    font-weight:bold;
}
div.tabBlockActive div.tab {
    display:none;
}
div.tabBlockActive div.tab h3.anchor {
    width:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    float:none !important;
    text-indent:-1000px !important;
    max-height:0 !important;
    max-width:0 !important;
}*/




div.tab p {margin:0 1em 1em;}

</style>
<script src="K.src.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
//<![CDATA[

var tabDisplay = {
    /**
     * Produces a tabbed display for your content. A row of tabs runs along a block of content.
     * The first tab is selected and displayed by default. The code is designed to be accessible:
     * it will take a some other wise plain content and convert it in to a tabbed display, so no
     * worries about SEO, page reloads or too many accessibility issues.
     *
     * Place all of your content inside a div with the id "tabBlock", then add the following items
     * in side the div...
     *
     * * An unordered list of links, each link will be a tab button and once clicked
     *   will display the appropriate content under the tab buttons.
     *
     * * Content to be displayed under each tab button. Wrap divs with the class "tab" around each 
     *   chunk of content that should be displayed for each tab button.
     *
     * THINGS TO NOTE: There should be the same number of tab buttons as blocks of content to display
     * and they should be in the same order. This code uses a simple way of deciding what content to 
     * display based on which button has been clicked.
     *
     * There is CSS to accompany this JavaScript.
     *
     * This object depends on the "K" utility object
     *
     * USAGE: tabDisplay.enable(document.getElementByTagName('tabBlock));
     *
     * EXAMPLE HTML:
     * 
     * <div id="tabBlock">
     *     <ul class="tabs">
     *         <li class="tab">
     *             <a href="#heading1" class="tab active">Heading 1</a>
     *         </li>
     *         <li class="tab">
     *             <a href="#heading2" class="tab">Heading 2</a>
     *         </li>
     *         <li class="tab">
     *             <a href="#headingN" class="tab">Heading N</a>
     *         </li>
     *     </ul>
     *     <div class="tab">
     *         <h3 class="anchor"><a name="heading1" class="anchor">Heading 1</a></h3>
     *             <!-- Tab 1 Content Here --> 
     *         <div class="clear"></div>
     *     </div>
     *     <div class="clear"></div>
     *     <div class="tab">
     *         <h3 class="anchor"><a name="heading2" class="anchor">Heading 2</a></h3>
     *             <!-- Tab 2 Content Here --> 
     *         <div class="clear"></div>
     *     </div>
     *     <div class="clear"></div>
     *     <div class="tab">
     *         <h3 class="anchor"><a name="headingN" class="anchor">Heading N</a></h3>
     *             <!-- Tab N Content Here -->
     *         <div class="clear"></div>
     *     </div>
     *     <div class="clear"></div>
     * </div>
     **/
    /**
     * each element of the array will hold a reference to a "tab button" - a link
     * @var array
     * @access private
     **/
    buttons : [],
    /**
     * each element of the array will hold a reference "tab panel", a div.tag element that
     * will be displayed when the corresponding tab button is clicked.
     * @var array
     * @access private
     **/
    contentAreas: [],
    /**
     * holds a reference to the entire tab block containing all of the links/buttons and 
     * the content.
     * @var object
     * @access private
     **/
    tabBlock: null,
    /**
     * each element of the array will hold a reference to a "tab button" - a link
     * @return null
     * @param object node the DOM Element that contains all content and buttons - see above.
     * @access public
     **/
    enable: function (node) {
        if (!node || typeof node.getElementsByTagName == 'undefined') return null;
        this.findButtons(node);
        this.findContentAreas(node);
        K.addClass(node, 'tabBlockActive');
        K.addClass(node, 'active');
        this.tabBlock = node;
        this.show(0);
    },
    /**
     * searches through all ancestor elements of the tab block to find the "tab buttons"
     * @return null
     * @param object node the DOM Element that contains all content and buttons - see above.
     * @access private
     **/
    findButtons: function (node) {
        if (!node || typeof node.getElementsByTagName == 'undefined') return null;
        var as = node.getElementsByTagName('a');
        if (!as) return null;
        for (var i = 0; i < as.length; ++i)
        {
            if (K.hasClass(as.item(i), 'tab'))
            {
                as.item(i).buttonIndex = this.buttons.length;
                as.item(i).tabDisplay = this;
                this.buttons[this.buttons.length] = as.item(i);
                myDisplay = this;
                as.item(i).onclick = function () {
                    myDisplay.show(this.buttonIndex);
                    
                    // Technically, should set focus to the div that is displayed upon clicking the tab
                    // button. In reality this can cause an unexpected "jump" in the page by causing the window
                    // to scroll down
                    
                    // var name = this.href.replace(/#/, '');
                    // var anchors = document.getElementsByTagName('a');
                    // if (a.length)
                    // {
                    //     for (var i = 0; i < anchors.length; ++i)
                    //     {
                    //         if (anchors.item(i).getAttribute('name') == name)
                    //         {
                    //             anchors.item(i).focus();
                    //             break;
                    //         }
                    //     }
                    // }
                    return false;
                }
            }
        }
    },
    /**
     * searches through all ancestor elements of the tab block to find the "tab panels"
     * @return null
     * @param object node the DOM Element that contains all content and buttons - see above.
     * @access private
     **/
    findContentAreas: function (node) {
        if (!node || typeof node.getElementsByTagName == 'undefined') return null;
        var divs = node.getElementsByTagName('div');
        if (!divs.length) return null;
        for (var i = 0; i < divs.length; ++i)
        {
            if (K.hasClass(divs.item(i), 'tab'))
            {
                this.contentAreas[this.contentAreas.length] = divs.item(i);
            }
        }
    },
    /**
     * Sets the appropriate css classes and properies to display the relevent "tab block" or "content area".
     * The each button is indexed from 0 upwards, in the order they appear in the document. The areas of 
     * content to display are indexed in the same way,
     *
     * @return null
     * @param int index the index of the button that was clicked
     * @access private
     **/
    show: function (index) {
        if (index === null || index === false || typeof index == 'undefined') return null;
        for (var i = 0; i < this.contentAreas.length; ++i)
        {
            if (i === index)
            {
                this.contentAreas[i].style['display'] = 'block';
                K.addClass(this.buttons[i], 'active');
                K.removeClass(this.buttons[i], 'inactive');
                K.addClass(this.contentAreas[i], 'active');
                K.removeClass(this.contentAreas[i], 'inactive');
            }
            else
            {
                this.contentAreas[i].style['display'] = 'none';
                K.addClass(this.buttons[i], 'inactive');
                K.removeClass(this.buttons[i], 'active');
                K.addClass(this.contentAreas[i], 'inactive');
                K.removeClass(this.contentAreas[i], 'active');
            }
        } 
    }
};

function tabs() {
    var tabBlock = document.getElementById('tabBlock');
      tabDisplay.enable(tabBlock);
}
window.onload = function () {
  
  
    
};
//]]>
</script>
	
</head>

<body>


<p style="margin-bottom:1em;font-size:2em"><a style="background:red;color:white;font-weight:bold;text-transform:uppercase;padding:0.5em" href="#" onclick="tabs();this.parentNode.removeChild(this); return false">Turn on Tabs</a></p>

<div id="tabBlock">
    <ul class="tabs">
        <li class="tab">
            <a href="#synopsis" class="tab active">SYNOPSIS</a>
        </li>
        <li class="tab">
            <a href="#reviews" class="tab">REVIEWS</a>
        </li>
        <li class="tab">
            <a href="#details" class="tab">DETAILS</a>
        </li>
    </ul>
    <div class="tab">
        <h3 class="anchor"><a name="synopsis" class="anchor">SYNOPSIS</a></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros elit, dictum at faucibus quis, posuere sit amet diam. Nulla laoreet consequat nibh a euismod. </p>
        <p>Praesent facilisis consectetur convallis. Donec ligula libero, aliquet vitae congue non, dictum quis metus. Quisque non lorem massa. Integer tempus lacus vitae mi volutpat posuere. Cras pretium vestibulum nunc, vel ultricies risus ultrices quis. Maecenas egestas, libero eu pretium varius, nibh urna suscipit arcu, quis consequat urna diam non urna. Nam sit amet mauris vel eros convallis egestas vitae nec sapien. Vivamus vitae dolor at enim vestibulum imperdiet at vel nibh. Etiam arcu odio, dignissim et fermentum et, ornare hendrerit magna. </p>
        <p>Fusce sem augue, sollicitudin eu ornare eget, condimentum vitae lectus. Cras rhoncus, magna pulvinar sodales suscipit, tellus felis feugiat sem, et dignissim libero purus vel dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi.</p>
        <p>Praesent facilisis consectetur convallis. Donec ligula libero, aliquet vitae congue non, dictum quis metus. Quisque non lorem massa. Integer tempus lacus vitae mi volutpat posuere. Cras pretium vestibulum nunc, vel ultricies risus ultrices quis. Maecenas egestas, libero eu pretium varius, nibh urna suscipit arcu, quis consequat urna diam non urna. Nam sit amet mauris vel eros convallis egestas vitae nec sapien. Vivamus vitae dolor at enim vestibulum imperdiet at vel nibh. Etiam arcu odio, dignissim et fermentum et, ornare hendrerit magna. </p>
        <p>Fusce sem augue, sollicitudin eu ornare eget, condimentum vitae lectus. Cras rhoncus, magna pulvinar sodales suscipit, tellus felis feugiat sem, et dignissim libero purus vel dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi.</p>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div class="tab">
        <h3 class="anchor"><a name="reviews" class="anchor">REVIEWS</a></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros elit, dictum at faucibus quis, posuere sit amet diam. Nulla laoreet consequat nibh a euismod. </p>
        <p>Praesent facilisis consectetur convallis. Donec ligula libero, aliquet vitae congue non, dictum quis metus. Quisque non lorem massa. Integer tempus lacus vitae mi volutpat posuere. Cras pretium vestibulum nunc, vel ultricies risus ultrices quis. Maecenas egestas, libero eu pretium varius, nibh urna suscipit arcu, quis consequat urna diam non urna. Nam sit amet mauris vel eros convallis egestas vitae nec sapien. Vivamus vitae dolor at enim vestibulum imperdiet at vel nibh. Etiam arcu odio, dignissim et fermentum et, ornare hendrerit magna. </p>
        <p>Fusce sem augue, sollicitudin eu ornare eget, condimentum vitae lectus. Cras rhoncus, magna pulvinar sodales suscipit, tellus felis feugiat sem, et dignissim libero purus vel dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi.</p>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div class="tab">
        <h3 class="anchor"><a name="details" class="anchor">DETAILS</a></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros elit, dictum at faucibus quis, posuere sit amet diam. Nulla laoreet consequat nibh a euismod. </p>
        <p>Praesent facilisis consectetur convallis. Donec ligula libero, aliquet vitae congue non, dictum quis metus. Quisque non lorem massa. Integer tempus lacus vitae mi volutpat posuere. Cras pretium vestibulum nunc, vel ultricies risus ultrices quis. Maecenas egestas, libero eu pretium varius, nibh urna suscipit arcu, quis consequat urna diam non urna. Nam sit amet mauris vel eros convallis egestas vitae nec sapien. Vivamus vitae dolor at enim vestibulum imperdiet at vel nibh. Etiam arcu odio, dignissim et fermentum et, ornare hendrerit magna. </p>
        <p>Fusce sem augue, sollicitudin eu ornare eget, condimentum vitae lectus. Cras rhoncus, magna pulvinar sodales suscipit, tellus felis feugiat sem, et dignissim libero purus vel dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros elit, dictum at faucibus quis, posuere sit amet diam. Nulla laoreet consequat nibh a euismod. </p>
        <p>Praesent facilisis consectetur convallis. Donec ligula libero, aliquet vitae congue non, dictum quis metus. Quisque non lorem massa. Integer tempus lacus vitae mi volutpat posuere. Cras pretium vestibulum nunc, vel ultricies risus ultrices quis. Maecenas egestas, libero eu pretium varius, nibh urna suscipit arcu, quis consequat urna diam non urna. Nam sit amet mauris vel eros convallis egestas vitae nec sapien. Vivamus vitae dolor at enim vestibulum imperdiet at vel nibh. Etiam arcu odio, dignissim et fermentum et, ornare hendrerit magna. </p>
        <p>Fusce sem augue, sollicitudin eu ornare eget, condimentum vitae lectus. Cras rhoncus, magna pulvinar sodales suscipit, tellus felis feugiat sem, et dignissim libero purus vel dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros elit, dictum at faucibus quis, posuere sit amet diam. Nulla laoreet consequat nibh a euismod. </p>
        <p>Praesent facilisis consectetur convallis. Donec ligula libero, aliquet vitae congue non, dictum quis metus. Quisque non lorem massa. Integer tempus lacus vitae mi volutpat posuere. Cras pretium vestibulum nunc, vel ultricies risus ultrices quis. Maecenas egestas, libero eu pretium varius, nibh urna suscipit arcu, quis consequat urna diam non urna. Nam sit amet mauris vel eros convallis egestas vitae nec sapien. Vivamus vitae dolor at enim vestibulum imperdiet at vel nibh. Etiam arcu odio, dignissim et fermentum et, ornare hendrerit magna. </p>
        <p>Fusce sem augue, sollicitudin eu ornare eget, condimentum vitae lectus. Cras rhoncus, magna pulvinar sodales suscipit, tellus felis feugiat sem, et dignissim libero purus vel dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros elit, dictum at faucibus quis, posuere sit amet diam. Nulla laoreet consequat nibh a euismod. </p>
        <p>Praesent facilisis consectetur convallis. Donec ligula libero, aliquet vitae congue non, dictum quis metus. Quisque non lorem massa. Integer tempus lacus vitae mi volutpat posuere. Cras pretium vestibulum nunc, vel ultricies risus ultrices quis. Maecenas egestas, libero eu pretium varius, nibh urna suscipit arcu, quis consequat urna diam non urna. Nam sit amet mauris vel eros convallis egestas vitae nec sapien. Vivamus vitae dolor at enim vestibulum imperdiet at vel nibh. Etiam arcu odio, dignissim et fermentum et, ornare hendrerit magna. </p>
        <p>Fusce sem augue, sollicitudin eu ornare eget, condimentum vitae lectus. Cras rhoncus, magna pulvinar sodales suscipit, tellus felis feugiat sem, et dignissim libero purus vel dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi.</p>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
</div>

<p><strong>HELLO??</strong></p>
<div style="height:200px"></div>

</body>
</html>

Main Menu

Personal tools

Toolbox