$(document).ready( function() {

  $('.toggle').click( toggle );
  $('.load-roots').click( loadRoots );
} );

function toggle( event ) {

  event.preventDefault();

  $(event.target).parent().children().toggle();
}

function loadRoots( event ) {
  
  event.preventDefault();
  
  var rootsHolder = $(event.target).parent().children( '.roots' );

  $.ajax( {
    type: 'GET',
    url: $(event.target)[0].href,
    dataType: 'text',
    success: function(data, textStatus){

      rootsHolder.html( data );
      $(event.target).unbind( 'click' ).click( toggle );
    },
    error: function( XMLHttpRequest, textStatus, errorThrown ){

      rootsHolder.html( 'Whoops - there was an error.  Totally our fault.  Please try again.' );
    }
  } );
}