---
title: destroy01
layout: default
category: tests
---

  <style>
    #container {
      width: 80%;
      height: 80%;
    }
  </style>

  <section id="copy">
    <p>Click <em>init</em> button the <em>destroy</em>. Original CSS, pre-init, should be re-applied, all items back to visibility.</p>
  </section>

  <section id="options">
    <button id="init">Init Isotope instance</button>
    <button id="destroy">Destroy Isotope instance</button>
  </section>

  <div id="container" style="height: 600px">
    {% for element in site.elements limit:20 %}
      {% include element-partial.html %}
    {% endfor %}
  </div> <!-- #container -->

  <script src="../{{ site.jquery_js }}"></script>
  <script src="../{{ site.isotope_js }}"></script>
  <script>
    $(function(){
    
      var $container = $('#container');
    
      $('#init').click(function(){
        $container.isotope({
          itemSelector: '.element',
          filter: '.metal'
        });
      });
      
      $('#destroy').click(function(){
        $container.isotope('destroy');
      });
    
    });
  </script>