Tistory Category 접기 / 펼치기

 

Tistory 기본 테마에서 Category 접기/펼치기 기능은 제공되지 않는다.

이를 제공하는 테마도 있지만 기본 테마에서 직접 HTML과 CSS를 수정하여 기능을 구현할 수 있다.

 

Html 코드 Body내에 구현

<script>
  $(function() {
    $("ul.category_list > li:has(ul) > a").addClass("custom-category-sub").removeAttr('href'),
    $("a.custom-category-sub").click( function() {
      $(this).siblings().slideToggle();
    });
  });
</script>

html에 자바스크립트를 넣으려면 <script>로 감싸줘야한다.

 

 

Css 수정

.sub_category_list { display:none }

기본적으로 펼쳐기 상태인 sub_category를 접혀있는 상태로 표시하는 코드를 Css에 삽입한다.

 

 

적용된 모습

깔끔해진 것을 확인할 수 있다.

 

 

참고 : https://seons-dev.tistory.com/