티스토리 카테고리에 아코디언 메뉴 사용하기

이런 식으로 접었다 폈다 하는 메뉴를 아코디언 메뉴라고 합니다.

HTML

• 혼자 끄적인 글 (288)
  • 프론트엔드 (144)
    • 제작 일지 (79)
    • Tips (51)
    • React.JS (2)
    • SVG (7)
  • 스킨 (19)
    • 스킨 목록 (1)
    • 스킨 배포 (14)
    • 주문 제작 (4)
  • 잡담 (40)
  • 문화 (8)
    • 음악 (3)
    • 손글씨 (3)
    • 집필 (1)
    • 독후감 (1)
  • 갤러리 (17)
  • 💕 (14)
    • 소녀시대 (4)
    • Twice (9)
  • 모바일 기기 (9)
  • 게임 (37)
    • 마인크래프트 (17)
    • 포켓몬스터 (13)
    • 배틀그라운드 (3)

 라는 티스토리 치환자만 있으면 됩니다.

CSS

.sub_category_list {display:none}
.ac-toggle i {transition:.25s}
.ac-menu.expanded .ac-toggle i{transform:scaleY(-1)}
.ac-menu .ac-toggle i {
  float: right;
  padding-right: 5px;
  pointer-events: none
}

.ac-menu .ac-toggle i라는 항목과 .c_cnt라는 항목(티스토리에서 기본적으로 카테고리 글 수에 추가하는 class)에 같은 css를 적용하면 위 사진처럼 모두 우측 정렬됩니다.

JS

$(function() {
  $(".category_list").children("li").has("ul").addClass("ac-menu"),
  $(".ac-menu .link_item").append("<i class=\"icon-chevron-down\"></i>").addClass("ac-toggle"),
  $(".ac-menu").each(function() {
    var c = $(this).children(".link_item"),
        d = c.attr("href");
            c.removeAttr("href"),
            $(this).children("ul").prepend("<li><a class=\"link_sub_item view-all\" href=" + d + ">카테고리 전체 보기</a></li>"),
            c.children("span").appendTo(c.parent(".ac-menu").find(".view-all"))
  }), $(".ac-toggle").click(function() {
        var c = $(this).parent(".ac-menu");
          c.children("ul").toggle(250),
          c.toggleClass("expanded")
  })
});

"icon-chevron-down" 을 본인이 사용 중인 아이콘 폰트에 맞는 class로 변경해주세요.

전 나중에 수정할 때 편하려고 $(function(){});으로 감싸뒀는데, 삭제하셔도 됩니다.