adding selector

musicindex.html

@@ -0,0 +1,72 @@
+---
+layout: default
+sitemap: false
+---
+    <div class="button-group filters-button-group">
+
+      <button class="button is-checked" data-filter="*">show all</button>
+
+<!-- create categories array-->
+{% assign categories_array = "" | split:"|" %}
+
+<!--Add each unique 'my_collection' category to the array-->
+{% for post in site.tracks %}
+    {% for category in post.categories %}
+        {% assign categories_array = categories_array | push: category | uniq %}
+    {% endfor %}
+{% endfor %}
+
+<!--Output the categories-->
+{% for category in categories_array %}
+  
+<button class="button" data-filter=".{{ category }}">{{ category }}</button> 
+{% endfor %}
+
+
+
+    </div>
+
+    <div class="grid" style="display:flex;flex-wrap: wrap;">
+        {% for resource in site.tracks %}
+      <div class="element-item {% for key in resource.categories %}{{ key | replace_first: ',', ''}} {% endfor %}" style="flex 1 1 150px;">
+          <div class="cartouche filtered" style="background-color: rgba(232, 241, 223, 1);background-image:url('{{ resource.image }}');background-position: center;">
+
+            </div>
+            <div class="cartouche">
+                <p class="editor-link"><a href="cloudcannon:collections/{{ page.path }}" rel="nofollow" class="btn"><strong>&#9998;</strong> Edit Resource</a></p>
+              <h4>{{ resource.title }}</h4>
+              <p>{{ resource.description | truncate: 65 }}</p>
+              <p>{{ resource.media_type }}</p>
+              <p><a class="cta" href="{{ resource.url }}" alt="länk till ressurs" target="_blank" rel="noopener noreferrer">Läs mer...</a></p>
+            </div>
+      </div>
+
+      {% endfor %}
+    </div>
+ 
+  <script>
+    // external js: isotope.pkgd.js
+
+    // init Isotope
+    var $grid = $('.grid').isotope({
+      itemSelector: '.element-item',
+      layoutMode: 'fitRows'
+    });
+    // filter functions
+
+    // bind filter button click
+    $('.filters-button-group').on('click', 'button', function () {
+      var filterValue = $(this).attr('data-filter');
+      // use filterFn if matches value
+
+      $grid.isotope({ filter: filterValue });
+    });
+    // change is-checked class on buttons
+    $('.button-group').each(function (i, buttonGroup) {
+      var $buttonGroup = $(buttonGroup);
+      $buttonGroup.on('click', 'button', function () {
+        $buttonGroup.find('.is-checked').removeClass('is-checked');
+        $(this).addClass('is-checked');
+      });
+    });
+  </script>