On-topic: HTML/JS help please

[Andy Wardley]

On 05/02/2010 14:53, David Cantrell wrote:
>    <tr>
>      <td><a href=javascript:toggle('children_of_this::module')>+</a></td>
>      <td>this::module</td>
>      <td>blahblahblah</td>
>    </tr>

Add all the dependencies to the <tr>.  e.g.

   <tr class="depends-This-Module depends-That-Module">

Then use jQuery to toggle a .hidden CSS class on all the <tr> elements that
have a particular dependency, like so:

   <a href="..." onclick="$('tr.depends-This-Module').toggleClass('hidden')">

Then add a CSS class:

   tr.hidden {
     display: none;
   }

That should degrade gracefully on a browser without JS or CSS.

Here's the full thing:

<script>
function toggle(module) {
     $('tr.depends-' + module.replace(/:+/,'-',1)).toggleClass('hidden');
     return false;
}
</script>

<table>
   <tr>
     <td><a href="#" onclick="return toggle('this::module')">+</a></td>
     <td>this::module</td>
     <td>blahblahblah</td>
   </tr>
   <tr class="depends-this-module">
     <td><a href="#" onclick="return toggle('other::module')">+</a></td>
     <td>other::module</td>
      <td>blahblahblah</td>
   </tr>
   <tr class="depends-this-module depends-other-module">
     <td><a href="#" onclick="return toggle('yet::another::module')">+</a></td>
     <td>yet::another::module</td>
     <td>blahblahblah</td>
   </tr>
   <div id='children_of_this::module'>
   <tr class="depdends-this-module">
     <td><a href="#" onclick="return toggle('Test::More')">+</a></td>
     <td>Test::More</td>
     <td>blahblahblah</td>
   </tr>
</table>


HTH
A