<div class="wrap">
  <!-- 카테고리 버튼 -->
  <div class="category">
    <div>all</div>
    <div>category01</div>
    <div>category02</div>
    <div>category03</div>
  </div>
  <!-- 요소 -->
  <div>
    <ul class="videoWrap displayFlex flexWrap">
      <li class="openBtn category01"></li>
      <li class="openBtn category02"></li>
      <li class="openBtn category03"></li>
      <li class="openBtn category02"></li>
      <li class="openBtn category01"></li>
      <li class="openBtn category03"></li>
      <li class="openBtn category01"></li>
      <li class="openBtn category03"></li>
      <li class="openBtn category02"></li>
    </ul>
  </div>
</div>
/* reset */
ul { list-style: none; }
div, ul, li { margin: 0; padding: 0; }

/* category btn */
.wrap { width: 800px; margin: 0 auto; }
.wrap .category { display: flex; justify-content: space-Around; margin: 20px 0; }
.wrap .category div { width: 140px; padding: 10px; border-radius: 10px; text-align: center; cursor: pointer; }
.wrap .category div:nth-child(1) { background-color: #ff8181; }
.wrap .category div:nth-child(2) { background-color: #fff281; }
.wrap .category div:nth-child(3) { background-color: #81d1ff; }
.wrap .category div:nth-child(4) { background-color: #ff81a7; }

/* list */
.videoWrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; list-style: none }
.videoWrap li { display: none; width: 240px; height: 100px; border-radius: 10px; }
.videoWrap li.category01 { background: #fff281; }
.videoWrap li.category02 { background: #81d1ff; }
.videoWrap li.category03 { background: #ff81a7; }

/* category class */
.on { display: block !important; }
/* category.js */

let categoryBtn = document.querySelectorAll(".category div")
let contents = document.querySelectorAll(".openBtn");

// 처음에는 전부 보이게
for(let i=0; i<contents.length; i++){
  contents[i].classList.add("on"); 
}

/* all */
categoryBtn[0].addEventListener("click", function(){
    for(let i=0; i<contents.length; i++){
        if(contents[i].classList.contains("openBtn")==false){
          contents[i].classList.remove("on");
          console.log("실행");
        }else {
          contents[i].classList.add("on"); 
          console.log("미실행");
        }
    }             
});

/* green */
categoryBtn[1].addEventListener("click", function(){    
    for(let i=0; i<contents.length; i++){
        if(contents[i].classList.contains("category01")==false){
          contents[i].classList.remove("on");
        }else {
            contents[i].classList.add("on"); 
        }
    }             
});

/* orange */
categoryBtn[2].addEventListener("click", function(){    
    for(let i=0; i<contents.length; i++){
        if(contents[i].classList.contains("category02")==false){
          contents[i].classList.remove("on");
        }else {
            contents[i].classList.add("on"); 
        }
    }             
});

/* purple */
categoryBtn[3].addEventListener("click", function(){    
    for(let i=0; i<contents.length; i++){
        if(contents[i].classList.contains("category03")==false){
          contents[i].classList.remove("on");
        }else {
            contents[i].classList.add("on"); 
        }
    }             
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.