https://paracosm.pages.dev/js/beach.js

1filterSelection("all")
2function filterSelection(c) {
3  var x, i;
4  x = document.getElementsByClassName("fb");
5  if (c == "all") c = "";
6  for (i = 0; i < x.length; i++) {
7    w3RemoveClass(x[i], "show");
8    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
9  }
10}
11
12function w3AddClass(element, name) {
13  var i, arr1, arr2;
14  arr1 = element.className.split(" ");
15  arr2 = name.split(" ");
16  for (i = 0; i < arr2.length; i++) {
17    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
18  }
19}
20
21function w3RemoveClass(element, name) {
22  var i, arr1, arr2;
23  arr1 = element.className.split(" ");
24  arr2 = name.split(" ");
25  for (i = 0; i < arr2.length; i++) {
26    while (arr1.indexOf(arr2[i]) > -1) {
27      arr1.splice(arr1.indexOf(arr2[i]), 1);     
28    }
29  }
30  element.className = arr1.join(" ");
31}
32
33// Add active class to the current button (highlight it)
34var btnContainer1 = document.getElementById("myBtnContainer1");
35var btns1 = btnContainer1.getElementsByClassName("btn");
36for (var i = 0; i < btns1.length; i++) {
37  btns1[i].addEventListener("click", function(){
38    var current1 = btnContainer1.getElementsByClassName("active");
39    current1[0].className = current1[0].className.replace(" active", "");
40    this.className += " active";
41  });
42}
43

44var btnContainer2 = document.getElementById("myBtnContainer2");
45var btns2 = btnContainer2.getElementsByClassName("btn");
46for (var i = 0; i < btns2.length; i++) {
47  btns2[i].addEventListener("click", function(){
48    var current2 = btnContainer2.getElementsByClassName("active");
49    current2[0].className = current2[0].className.replace(" active", "");
50    this.className += " active";
51  });
52}