CODEWITHSUNDEEP
javascripthtmlcsstabbed-view
Viral Jain
Viral Jain

Reputation: 1014

How do I make multilevel tabbed panes in HTML/CSS/JavaScript?

I want to make multilevel tabbed panes for my PHP frontend.

I want to achieve something like this:

_______|TAB1||Tab2||Tab3|________________________________
___________|SUB TAB1||Sub Tab2|_____________________
|Content of Sub Tab 1 of Tab1 |
|Content of Sub Tab 1 of Tab1 |
|Content of Sub Tab 1 of Tab1 |
|Content of Sub Tab 1 of Tab1 |

Similarly, when I click on Sub tab2 of Tab1 it should show its content. Now when I click Tab 2, it should by default display contents of its subtab11 & when I click SubTab2 of Tab2, it should display its content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head><title>Tab-View Sample</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords"    content="" />
        <link rel="stylesheet" type="text/css" href="tab-view.css" />
    </head>

    <body>
        <?php $id = isset($_GET['id']) ? $_GET['id'] : 1;
            $ida = isset($_GET['ida']) ? $_GET['ida'] : 11;
        ?>
        <div class="TabView" id="TabView">
            <!-- ***** Tabs ************************************************************ -->
            <div class="Tabs" style="width: 452px;">
              <a <?=($id == 1) ? 'class="Current"' : 'href="sample.php?id=1"';?>>Tab 1</a>
              <a <?=($id == 2) ? 'class="Current"' : 'href="sample.php?id=2"';?>>Tab 2</a>
              <a <?=($id == 3) ? 'class="Current"' : 'href="sample.php?id=3"';?>>Tab 3</a>
            </div>

            <!-- ***** Pages *********************************************************** -->
            <div class="Pages">
                <div class="Page" style="display: <?=($id == 1 && $ida == 11) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <div class="Tabs" style="width: 452px;">
                            <a <?=($ida == 11) ? 'class="Current"' : 'href="sample.php?id=1&ida=11"';?>>Tab 1</a>
                            <a <?=($ida == 12) ? 'class="Current"' : 'href="sample.php?id=1&ida=12"';?>>Tab 2</a>
                        </div>

                        <div class="Pages">
                            <div class="Page" style="display: <?=($ida == 11) ? 'block' : 'none';?>">
                                <div class="Pad">
                                    Hello World Tab 11!!!
                                </div>
                            </div>
                        </div>
                        <div class="Pages">
                            <div class="Page" style="display: <?=($ida == 12) ? 'block' : 'none';?>">
                                <div class="Pad">
                                    Hello World Tab 12!!!
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="Page" style="display: <?=($id == 2) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <? odbc_result_all($cur,"border=1"); ?>
                    </div>
                </div>

                <div class="Page" style="display: <?=($id == 3) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <?
                        foreach($arr as $val)
                        {
                            echo($val.'<br>');
                        }
                        ?>
                    </div>
                </div>
            </div>

            <div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
        </div>


        <div class="TabView1" id="TabView1">
            <!-- ***** Tabs ************************************************************ -->
            <div class="Tabs" style="width: 452px;">
              <a <?=($id == 4) ? 'class="Current"' : 'href="sample.php?id=4"';?>>Tab 4</a>
              <a <?=($id == 5) ? 'class="Current"' : 'href="sample.php?id=5"';?>>Tab 5</a>
              <a <?=($id == 6) ? 'class="Current"' : 'href="sample.php?id=6"';?>>Tab 6</a>
            </div>

            <!-- ***** Pages *********************************************************** -->
            <div class="Pages">
                <div class="Page" style="display: <?=($id == 4) ? 'block' : 'none';?>">
                    <div class="Pad">
                        Hello India!!!
                    </div>
                </div>

                <div class="Page" style="display: <?=($id == 5) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <? odbc_result_all($cur,"border=1"); ?>
                    </div>
                </div>

                <div class="Page" style="display: <?=($id == 6) ? 'block' : 'none';?>">
                    <div class="Pad">
                        <?
                        foreach($arr as $val)
                        {
                            echo($val.'<br>');
                        }
                        ?>
                    </div>
                </div>
            </div>

            <div class="footer">Copyright 1999-2005 by Refsnes Data.</div>
        </div>

        <script type="text/javascript" src="tab-view.js"></script>
        <script type="text/javascript">
            tabview_initialize('TabView');
            tabview_initialize('TabView1');
        </script>
    </body>
</html>

I want to achieve multilevel tabs through this code. It is displaying correctly, but when I click on one of the subtabs, it gives an error:

"Object not found"

Upvotes: 0

Views: 2551

Answers (2)

Viral Jain
Viral Jain

Reputation: 1014

http://flowplayer.org/tools/tabs/index.html

Finally I used this library file to get my job done.

Thanks all for your views, replies & suggestions. :)

Upvotes: 0

NoBugs
NoBugs

Reputation: 9512

As a simple example, you could use <a href="javascript:;" onclick="show(1)">, where 1 is the tab number, for each tab.

Then make special named tags for the sections:

<div id="div1">section 1</div>
<div id="div2">section 2</div>
...

and a script to change visibility:

function show(number) {
    document.getElementById("div2").style.display='none'
    document.getElementById("div2").style.display='none'
    ...
    document.getElementById("div"+number).style.display='block'
}

You should be able to do the same for the sub-section tabs, since a sub-element of a hidden element is hidden.

Upvotes: 1

Related Questions