htmlテーブル行のdivコンテンツの切り替え

Question

このコードを見ましたが、同じボタンをクリックしてdivコンテンツを非表示にする方法を知りたいと思います。 .toggle（）を配置しようとしましたが、どこに置くべきかわかりません。私はまだjavascriptとjqueryを学んでおり、私は多くの問題を練習しています。

JS：

$(document).delegate('input[type="button"]','click',function(){ 
    $('[colspan="5"]').parent('tr').remove(); 
    $(this).parents('tr').after('<tr/>').next().append('<td colspan="5"/>').children('td').append('<div/>').children().css('background','#f0f0f0').html($('#content').html()); 
}); 

fiddle

Answer 1

あなたはこれをしようとする場合があります：

$('input[type="button"]').on('click', function(){ 

    // check if its a toggle by asking if it exists and is next to my TR 
    if($(this).parent('td').parent('tr').next('tr').children('td#temp').length === 1){ 

    // toggle the td 
    $('td#temp').toggle(); 

    } else { 

    // remove other content divs 
    $('td#temp').parent().remove(); 

    // perform insertion of content div 
    $(this).parents('tr') 
      .after('<tr/>') 
      .next().append('<td id="temp" colspan="5"/>') 
      .children('td') 
      .append('<div/>') 
      .children() 
      .css('background','#f0f0f0') 
      .html($('#content').html()); 
    } 
}); 

コメントはコードを説明します。