title: How to add and remove gifs on click?
body: <p>I am using materialize to create an accordion collapsible on my page. I want to add gifs/images to my page when the collapsible header is clicked and want to remove them when that collapsible header is clicked again or another header is clicked.</p>
  
  <p>I am able to add the gifs on click but have not been able to figure out how to remove them. I am using javascript and jquery. </p>
  
  <p>Below is my code:</p>
  
  <pre><code>contentTitles = ["Test1", "Test2", "Test3"];
  contentLinks = ["test1.gif", "test2.gif", "test3.gif"];
  
  $(document).ready(function(){
    $('.collapsible').collapsible();
    $('main').append('&lt;ul data-collapsible="accordion"&gt;&lt;/ul&gt;');
    $('ul').addClass('collapsible popout');
  
  for (var j = 0; j &lt; contentTitles.length; j++) {
    $('ul').append('&lt;li&gt;&lt;/li&gt;');
    // 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('&lt;div&gt;&lt;i&gt;&lt;/i&gt;&lt;/div&gt;');
  $('li').append('&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;');
  $('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('&lt;iframe class="gif" src=' + contentLinks[index] + '&gt;');
    })
  })
  
  $('.collapsible-header').on('click', function() {
    $('.collapsible-body').html();
  })
  
  })
  });
  </code></pre>
  
  <p>Thank you.</p>