1 ---

     2 title: destroy

     3 layout: default

     4 category: tests

     5 ---

     6 

     7   <style>

     8     #container {

     9       width: 80%;

    10       height: 80%;

    11     }

    12   </style>

    13 

    14   <section id="copy">

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

    16   </section>

    17 

    18   <section id="options">

    19     <button id="init">Init Isotope instance</button>

    20     <button id="destroy">Destroy Isotope instance</button>

    21   </section>

    22 

    23   <div id="container" style="height: 600px">

    24     {% for element in site.elements limit:20 %}

    25       {% include element-partial.html %}

    26     {% endfor %}

    27   </div> <!-- #container -->

    28 

    29   <script src="../{{ site.jquery_js }}"></script>

    30   <script src="../{{ site.isotope_js }}"></script>

    31   <script>

    32     $(function(){

    33     

    34       var $container = $('#container');

    35     

    36       $('#init').click(function(){

    37         $container.isotope({

    38           itemSelector: '.element',

    39           filter: '.metal'

    40         });

    41       });

    42       

    43       $('#destroy').click(function(){

    44         $container.isotope('destroy');

    45       });

    46     

    47     });

    48   </script>