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”
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. 🙂