sparlex.js

let main = document.querySelector("#mainList");
let sub = document.querySelector("#subList");

main.addEventListener("click",showSubList);

let cnt = 0;

function showSubList() {
  cnt++;

  if (cnt % 2 == 1) {
    sub.classList.toggle("display_none");
  }
}

let left = document.querySelector(".left");
let right = document.querySelector(".right");
let slide = document.querySelectorAll(".slide");

left.addEventListener("click",leftsliding);
right.addEventListener("click",rightsliding);

let index = 0;

function leftsliding() {
  index--;

  if (index < 0) {
    index = slide.length-1;
  }
  sliding();
}

function rightsliding() {
  index++;

  if (index >= slide.length) {
    index = 0;
  }
  sliding();
}

function sliding() {
  slide.forEach(function(slide) {
    slide.style.transform = `translateX(${index * (-100)}%)`;
  });
}

let tab = document.querySelectorAll(".tab_buttons span");
let content = document.querySelectorAll(".tab_content");

for (let i = 0; i < tab.length; i++) {
  tab[i].addEventListener("click",showTabContent);
}

function showTabContent() {
  let tabClass = this.id;

  content.forEach(function(content) {

    if (tabClass === "all" || content.classList.contains(tabClass)) {
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
  })
}