On-topic: HTML/JS help please

Andy Wardley abw at wardley.org
Fri Feb 5 19:44:24 GMT 2010

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:

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

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


More information about the london.pm mailing list