2

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.

1 Answer 1

0

This is the final code to meet your requirements. I have written click functions for particular tab.

<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();
    $("#ui-accordion-accordion-header-1").click( function(){
        $("#ui-id-2").click();
    });
    $("#ui-accordion-accordion-header-0").click( function(){
        $("#ui-id-1").click();
    });
    $("#app1").click( function(){
        $("#appTable1").show();
        $("#appTable2").hide();
    });
    $("#app2").click( function(){
        $("#appTable2").show();
        $("#appTable1").hide();
    });
    $("#app3").click( function(){
        $("#appTable2").hide();
        $("#appTable1").hide();
    });
    $("#tab1").click( function(){
        $("#tabtab1").show();
        $("#tabtab2").hide();
        $("#tabtab3").hide();
    });
    $("#tab2").click( function(){
        $("#tabtab1").hide();
        $("#tabtab2").show();
        $("#tabtab3").hide();
    });
    $("#tab3").click( function(){
        $("#tabtab1").hide();
        $("#tabtab2").hide();
        $("#tabtab3").show();
    });

  });
  </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 id="app1">Application 1</li>
      <li id="app2">Application 2</li>
      <li id="app3">Application 3</li>
    </li>
  </div>
    <h3>Table</h3>
  <div>
       <li>
      <li id="tab1">Table 1</li>
      <li id="tab2">Table 2</li>
      <li id="tab3">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" id="appTable1" hidden="true"><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" id="appTable2" hidden="true"><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 hidden="true" id="tabtab1">Table 1</li>
      <li hidden="true" id="tabtab2">Table 2</li>
      <li hidden="true" id="tabtab3">Table 3</li>
    </ul>  
    </div>  
</div>
</div>

 </body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.