Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make tabs that show/hide content?

    Can anyone point me in the right direction . . . I would like to make a set of horizontal tabs that, onClick, shows content below that is related to that tab.

    Any advice on a good script for doing this?

    Thanks,
    Nicole

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    here's a basic example:
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    style type="text/css">
    <!--
    #tabs span {
        
    background-color#CCCCCC;
        
    cursor:pointer;
    }
    #exp div {
        
    background-color#F5F5F5;
        
    width100px;
        
    position:absolute;
        
    visibility:hidden;
    }
    -->
    </
    style>
    <
    script type="text/JavaScript">
    var 
    ind;var x; var y; var h;
    function 
    showE(o,v){
    hideAll();
    var 
    oTab o.parentNode.getElementsByTagName('span');
    for(var 
    i=0;i<oTab.length;i++){
    if(
    o==oTab[i]){
    ind=i;break
    }
    }
    o.offsetHeight;
    o.offsetLeft;
    o.offsetTop;
    while(
    o.offsetParent){
    if(
    o==document.getElementsByTagName('body')[0]){break;}
    else{
    x=x+o.offsetParent.offsetLeft;
    y=y+o.offsetParent.offsetTop;
    o=o.offsetParent;
    }
    }
    var 
    oExp document.getElementById('exp').getElementsByTagName('div')[ind];
    oExp.style.left x+'px';
    oExp.style.top = (y+h)+'px';
    if((
    oExp.style.visibility == 'hidden')||(oExp.style.visibility == '')){
    oExp.style.visibility='visible';
    }
    else{
    oExp.style.visibility='hidden';}
    }
    function 
    hideAll(){
    var 
    oExp document.getElementById('exp').getElementsByTagName('div');
    for(var 
    i=0;i<oExp.length;i++){
    oExp[i].style.visibility='hidden';
    }
    }
    </script>
    </head>
    <body>
    <table border="0" align="center" cellpadding="2" cellspacing="2">
    <tbody>
    <tr>
    <td>
    <div id="tabs">
    <span onclick="showE(this)">tab1</span> | <span onclick="showE(this)">tab2</span>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    <div id="exp">
    <div>descripive text for tab1</div>
    <div>descripive text for tab2</div>
    </div>
    </body>
    </html> 
    Last edited by Kor; 04-21-2005 at 03:29 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, that's pretty much what I was looking for. One question, though, can I set it up so the tab content appears on the bottom half of the page aligned to the right, not aligned directly below the cooresponding tab ?

    I see I can change it to "right" position (line 17), but when I do that, the first tab's content looks okay, but the second tab's content starts below where the first tab's content had appeared. I need each tab's content to start at the top.

    Thanks

    ** Nevermind, I figured it out . . . thanks again for the help!
    Last edited by mmendo; 04-21-2005 at 11:09 PM.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    One question, though, can I set it up so the tab content appears on the bottom half of the page aligned to the right, not aligned directly below the cooresponding tab ?
    You may set the tabs wherever you want. The code is fully dynamic, as it gets the real position of each tab, nomatter where you put them, nomatter if you insert them into tables, divs, left align, right align or whichever. Give it a try
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •