HTML CSS 접히는 카테고리 메뉴

접히는 카테고리 메뉴를 만들어 봤습니다. 블로그의 카테고리가 늘어나면 필요할 거 같아서 미리 연구해 봤습니다. 이름을 정확하게는 모르겠는데, 아마도 Accordion Menu 또는 Collapsible Menu 라고 하는 것 같습니다. jQuery 라이브러리를 사용했고, 아이콘은 Font Awesome을 사용했습니다. Test Color는 레이아웃(Layout)이 제대로 잡혔는지 확인하려고 넣었습니다.

Test Color

<!DOCTYPE html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css' rel='stylesheet'/>

<style>
.cate-box { max-width: 280px; border: 1px solid lightgray; padding: 20px;}
.cate-box ul { padding-left: 25px; }
.cate-box li { margin: 8px 0; }
.cate-box a { color: gray; }
.cate-box i { color: royalblue; }
.cate-parent { display: flex; justify-content: space-between; }
.cate-child { display: none; }
.cate-btn { padding: 0 5px; }
.cate-parent.color { background: pink; }
.cate-btn.color { background: hotpink; }
</style>

<div class="cate-box">
  <input type="checkbox" id="testColor">
  <label for="testColor">Test Color</label>
  <ul>
    <li><a href="#">전체보기</a></li>
    <li>
      <div class="cate-parent"><a href="#">코딩스터디</a></div>
      <ul class="cate-child">
        <li><a href="#">HTML</a></li>
        <li><a href="#">Python</a></li>
        <li><a href="#">Java</a></li>
      </ul>
    </li>
    <li>
      <div class="cate-parent"><a href="#">독서생활</a></div>
      <ul class="cate-child">
        <li><a href="#">자기계발서</a></li>
        <li><a href="#">소설</a></li>
        <li><a href="#">시&수필</a></li>
      </ul>
    </li>
    <li>
      <div class="cate-parent"><a href="#">음악감상</a></div>
      <ul class="cate-child">
        <li><a href="#">Jazz</a></li>
        <li><a href="#">Classic</a></li>
        <li><a href="#">Pop</a></li>
      </ul>
    </li>
    <li><a href="#">여행</a></li>
    <li><a href="#">일상</a></li>
  </ul>
</div>

<script>
$(document).ready(function() {  
  var cateBtn = $("<a>").addClass("cate-btn")
    .append($("<i>").addClass("fas fa-caret-down"))
    .attr("href", "javascript:void(0)")
    .click(function() {
      $(this).parent().next().toggle();
      $(this).children("i").toggleClass("fa-rotate-180");
    });
  $(".cate-parent").append(cateBtn);
  $("#testColor").click(function() {
    $(".cate-parent, .cate-btn").toggleClass("color");
  });
});
</script>