I have created a small HTML page in which navigation tabs are there. I have visited http://jqueryui.com/accordion/ for reference. Sample HTML created on the basis of that
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<style type="text/css">
div #tabs
{
width:900px;
float:left;
}
div #accordion
{
width:250px;
float:left;
}
</style>
</head>
<body>
<div>
<div id="accordion">
<h3>Application</h3>
<div>
<li>
<li><a href="#Application1">Application 1</a></li>
<li><a href="#Application2">Application 2</a></li>
<li>Application 3</li>
</li>
</div>
<h3>Table</h3>
<div>
<li>
<li>Table 1</li>
<li>Table 2</li>
<li>Table 3</li>
</li>
</div>
</div>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Application</a></li>
<li><a href="#tabs-2">Table</a></li>
</ul>
<div id="tabs-1">
<a id="Application1" name="Application1"></a><table border="1"><caption><b>Application 1</b></caption><tr><th>Sub Application</th><th>TableName</th><th>Count</th><th>CreationDate</th></tr><tr><td>Test 1</td><td> Table A</td><td>319</td><td>20-10-2013</td></tr></table>
<a id="Application2" name="Application2"></a><table border="1"><caption><b>Application 2</b></caption><tr><th>Sub Application</th><th>TableName</th><th>Count</th><th>CreationDate</th></tr><tr><td>Test 1</td><td> Table D</td><td>400</td><td>19-10-2013</td></tr></table>
</div>
<div id="tabs-2">
<ul>
<li>Table 1</li>
<li>Table 2</li>
<li>Table 3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
In this accordion
and tabs
feature is used. This HTML page contains two navigations i.e. one Vertical and One Horizontal. Now my problem is when user clicks on Application 1 under Application Tab in Left Navigation, then on right side which contains detailed information, the pointer should go to Application tab and then show only Application 1 information i.e filtering the contents based on what has been clicked and rest should be hidden. Please suggest.(Please ignore the href i created in left navigation as i was trying to see behavior when clicked). This feature should work for any tab content when clicked on left side navigation i.e. When clicked on Table 1 on left side, it should jump and show Table 1 in right side.