third-party/jquery-ui-1.10.2/tests/visual/compound/accordion_tabs.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>Compound Visual Test : Accordion in Tabs</title>
   6         <link rel="stylesheet" href="../visual.css">
   7         <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
   8         <script src="../../../jquery-1.9.1.js"></script>
   9         <script src="../../../ui/jquery.ui.core.js"></script>
  10         <script src="../../../ui/jquery.ui.widget.js"></script>
  11         <script src="../../../ui/jquery.ui.accordion.js"></script>
  12         <script src="../../../ui/jquery.ui.tabs.js"></script>
  13         <script>
  14         $(function() {
  15                 $( "#accordion-1, #accordion-2" ).accordion();
  16                 $( "#tabs" ).tabs();
  17         });
  18         </script>
  19 </head>
  20 <body>
  21
  22 <div id="tabs">
  23         <ul>
  24                 <li><a href="#tabs-1">First</a></li>
  25                 <li><a href="#tabs-2">Second</a></li>
  26         </ul>
  27         <div id="tabs-1">
  28                 <div id="accordion-1">
  29                         <h3>Accordion Header 1</h3>
  30                         <div>
  31                                 <p>Accordion Content 1</p>
  32                                 <p>Accordion Content 1</p>
  33                                 <p>Accordion Content 1</p>
  34                                 <p>Accordion Content 1</p>
  35                                 <p>Accordion Content 1</p>
  36                         </div>
  37                         <h3>Accordion Header 2</h3>
  38                         <div>
  39                                 <p>Accordion Content 2</p>
  40                                 <p>Accordion Content 2</p>
  41                                 <p>Accordion Content 2</p>
  42                                 <p>Accordion Content 2</p>
  43                                 <p>Accordion Content 2</p>
  44                         </div>
  45                         <h3>Accordion Header 3</h3>
  46                         <div>
  47                                 <p>Accordion Content 3</p>
  48                                 <p>Accordion Content 3</p>
  49                                 <p>Accordion Content 3</p>
  50                                 <p>Accordion Content 3</p>
  51                                 <p>Accordion Content 3</p>
  52                         </div>
  53                 </div>
  54         </div>
  55         <div id="tabs-2">
  56                 <div id="accordion-2">
  57                         <h3>Accordion Header 1</h3>
  58                         <div>
  59                                 <p>Accordion Content 1</p>
  60                                 <p>Accordion Content 1</p>
  61                                 <p>Accordion Content 1</p>
  62                                 <p>Accordion Content 1</p>
  63                                 <p>Accordion Content 1</p>
  64                         </div>
  65                         <h3>Accordion Header 2</h3>
  66                         <div>
  67                                 <p>Accordion Content 2</p>
  68                                 <p>Accordion Content 2</p>
  69                                 <p>Accordion Content 2</p>
  70                                 <p>Accordion Content 2</p>
  71                                 <p>Accordion Content 2</p>
  72                         </div>
  73                         <h3>Accordion Header 3</h3>
  74                         <div>
  75                                 <p>Accordion Content 3</p>
  76                                 <p>Accordion Content 3</p>
  77                                 <p>Accordion Content 3</p>
  78                                 <p>Accordion Content 3</p>
  79                                 <p>Accordion Content 3</p>
  80                         </div>
  81                 </div>
  82         </div>
  83 </div>
  84
  85 </body>
  86 </html>