クリック時にgifを追加して削除するにはどうすればよいですか？

Question

私は自分のページにアコーディオン折りたたみを作成するためにマテリアライズを使用しています。折りたたみ可能なヘッダーがクリックされたときに自分のページにGIF /イメージを追加したい場合、折りたたみ可能なヘッダーをもう一度クリックするか、別のヘッダーをクリックしたときに削除します。

クリック時にgifを追加できますが、削除方法を理解できませんでした。私はjavascriptとjqueryを使用しています。以下は

は私のコードです：

contentTitles = ["Test1", "Test2", "Test3"]; 
contentLinks = ["test1.gif", "test2.gif", "test3.gif"]; 

$(document).ready(function(){ 
    $('.collapsible').collapsible(); 
    $('main').append('<ul data-collapsible="accordion"></ul>'); 
    $('ul').addClass('collapsible popout'); 

for (var j = 0; j < contentTitles.length; j++) { 
    $('ul').append('<li></li>'); 
    // start the creation of the collapsible 
    $('.collapsible').collapsible({ 
     accordion: false, // A setting that changes the collapsible behavior to expandable instead of the default accordion style 
    }); 
    }; 

// create the collapsible 
$('li').append('<div><i></i></div>'); 
$('li').append('<div><span></span></div>'); 
$('i').addClass('material-icons'); 
$('i').parent().addClass("collapsible-header hoverable"); 
$('span').parent().addClass("collapsible-body"); 

// adds the titles to each collapsible header 
$('.collapsible-header').each(function(index) { 
    $(this).html(contentTitles[index]); 
}) 

// adds the gif urls to each collapsible body 
$('.collapsible-header').on('click', function() { 
    $('.collapsible-body').each(function(index) { 
    $(this).html('<iframe class="gif" src=' + contentLinks[index] + '>'); 
    }) 
}) 

$('.collapsible-header').on('click', function() { 
    $('.collapsible-body').html(); 
}) 

}) 
}); 

ありがとうございました。

Answer 1

.html（）呼び出しは要素のhtmlコンテンツを返すだけで、変更されません。あなたは要素を空にしたい場合は、次の操作を行います。私はそれらのいずれかを見ることができるよ前に

$('.collapsible-header').on('click', function() { 
    $('.collapsible-body').html(""); //set HTML to be an empty string 
})