Tab view in CSS with tables

Question

I need a tab view in CSS with each tab showing a dynamic table. The complete table is dynamically constructed in loop and only after that should the tabs should hide and show each of the table corresponding to each tab. Any suggestions? The content of the tab is within list item and in loop only. The development is in Django/Python on appspot.

The following code does not work for jquery also, is there a problem somewhere?

<pre><code> <div id="tabs">
 <ul> 
{% for poolname in poolnamelist %}
 <li><a href="#mypool{{ forloop.counter }}">
<span>{{ poolname|escape }}</span></a></li>
 {% endfor %}
 </ul>
 {% for poolsequence in sequences %}
 <div id="mypool{{ forloop.counter }}">
 <table> 
{% for sequence in poolsequence %}
 <form action="/mypool" method="post">
 <tr><td>{{ sequence.seqdate }}</td>
 <td><input type="submit" value="ChangeDriver"/></td>
 </tr>
 </form>
 {% endfor %}
 </table>
 </div>
 {% endfor %}
 </div>
 </code></pre>

Answer 1

Check out jQuery UI Tabs; this will do what you're looking for. It's not possible to do this using pure CSS.

Answer 2

Just of the top of my head, check out what some of the Javascript toolkits have to offer. Things like jQuery with a few plugins or Dojo might have something like that in its Dijit library.