Espandere e collassare

Adesso voglio rendere la mia tabella espandibile e collassabile

Javascript code:

$(document).ready(function() {

  alert("expand ");

  var $subHead = $('thead th:first-child');

  var toggleMinus = '../icons/bullet_toggle_minus.png';

  var togglePlus = '../icons/bullet_toggle_plus.png';

  $subHead.prepend('<img src="' + toggleMinus + '" alt="collapse this section" />');

 
 $('img', $subHead).addClass('clickable')

  	.click(function() {

  

  		var toggleSrc = $(this).attr('src');

  		if ( toggleSrc == toggleMinus ) {

  			$(this).attr('src', togglePlus)

  				.parents('table').find('tbody').addClass('collapsed').fadeOut('fast');

  		} else{

  			$(this).attr('src', toggleMinus)

  				.parents('table').find('tbody').removeClass('collapsed').not('.filtered').fadeIn('fast');

  		};

  });

  });

Le parti importanti del codice:

• var $subHead = $('thead th:first-child'); - trovo il primo th in thead
• $subHead.prepend('<img src="' + toggleMinus + '" alt="collapse this section" />'); - aggiungo l'immaginetta
• $(this).attr('src', togglePlus)
  .parents('table').find('tbody').addClass('collapsed').fadeOut('fast');
  - faccio il fade di tbody

Ecco la nostra tabella Espandere e collassare step 1