티스토리 블로그 : 열고 닫을 수 있는 카테고리 만들기

본문 들어가기 전에 반드시 jQuery를 넣어주세요

아래 스크립트를 스킨편집(HTML)의 </head> 바로 앞에 추가합니다

<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>

 

네이버 블로그를 하다가 티스토리로 막 넘어왔을 때,

불편하다고 느꼈던 점 중 하나가 바로 카테고리를 여닫을 수 없다는 점입니다.

카테고리 관리에서는 여닫기가 가능하지만, 그건 관리자 페이지에서 편의를 위해 작동하는 부분이니까요…

 

다만, 티스토리에서는 여닫을 수 있는 카테고리를 아예 만들 수 없느냐, 하면… 그건 아닙니다.

네이버 블로그와는 다르게, 티스토리는 스킨의 html 등을 조정할 수 있으니까요!

 

 

덕분에 제 티스토리의 카테고리 중 하나도 위 움짤처럼 여닫을 수 있답니다.

 

그렇다면 이러한 카테고리는 어떻게 만들까요?

여닫는 카테고리를 만들기 위해 알아야 할 jQuery 메서드는 .toggle()입니다.

이 메서드는 선택한 요소가 보이면 보이지 않게, 보이지 않는다면 보이게 하는 역할을 합니다.

 

그러니… 여닫고 싶은 카테고리에 .toggle()을 적용시키면 아주 간단하게 작업을 끝낼 수 있겠죠?

 

<s_sidebar_element>
    <div class="category">
    <!-- 카테고리 -->
        <h3>카테고리</h3>
        
 전체보기 
  
 CoC 루팬 
  
 01 
 02 
 03 


 ORPG 
  
 로그 백업 
 자작 시날 
 Roll20 


 게임 
  
 메이플 
 스타듀밸리 
 심즈3 
 그외 


 기타 




    </div>
</s_sidebar_element>

(사용 중인 스킨에 따라 형태에 차이가 있을 수 있습니다.)

 

그런데 스킨편집(html 편집)에서 카테고리 부분을 보면, 치환자가 덜렁 놓여 있습니다.

이 상태로는 여닫고 싶은 카테고리를 골라낼 수 없기 때문에, 어렵지 않은 2가지 작업이 필요합니다.

① 해당 작업을 하기 위해서 여닫고 싶은 카테고리가 몇 번째 카테고리인지 확인합니다.

 

② 스킨편집의 </s_t3> 바로 앞에 아래 스크립트를 붙여넣기 해줍니다.

<script>
$(function(){
    $('.category_list li:nth-child(n) > a').addClass('원하는클래스명');
    $('.category_list .원하는클래스명 .sub_category_list a').removeClass('원하는클래스명');
})
</script>

n = 해당 카테고리는 몇 번째?

 

1) 위 작업이 끝났다면, 해당 카테고리에 여닫기 기능을 해줄 버튼을 삽입합니다.

스킨편집(파일 업로드)에 아래 파일을 추가해도 되고, 커스텀해도 OK

여닫기버튼.zip

0.00MB

 

<s_sidebar_element>
<div class="category">
<!-- 카테고리 -->
    <h3>카테고리</h3>
    
 전체보기 
  
 CoC 루팬 
  
 01 
 02 
 03 


 ORPG 
  
 로그 백업 
 자작 시날 
 Roll20 


 게임 
  
 메이플 
 스타듀밸리 
 심즈3 
 그외 


 기타 




    <div class="OCbtn">
        <img alt="OP" src="./images/ico_f_open_l.gif" />
        <img alt="CL" src="./images/ico_f_closed_l.gif" />
    </div>
</div>
</s_sidebar_element>

※ 커스텀했을 경우 이미지 태그의 src를 변경해주어야 합니다.

 

2) 사전 작업에서 추가했던 스크립트 안에 아래 스크립트를 추가합니다.

$('.OCbtn').insertAfter('.원하는클래스명');

<script>
$(function(){
    $('.category_list li:nth-child(n) > a').addClass('원하는클래스명');
    $('.category_list .원하는클래스명 .sub_category_list a').removeClass('원하는클래스명');
    $('.OCbtn').insertAfter('.원하는클래스명 > a');
})
</script>

 

↓ 사전 작업의 n값이 2일 때, 위 스크립트를 추가하고 난 뒤의 결과물 ↓

• 모든 글 보기
  • 카테고리1 이름
  • 카테고리2 이름
    • 하위 카테고리1 이름
  • 카테고리3 이름

 

3) 여닫기 버튼과 여닫고 싶은 카테고리의 하위 카테고리에 .toggle() 메서드 추가하고,

해당 메서드를 포함하는 함수를 .click() 메서드를 이용하여 사전 작업에 추가한 스크립트에 넣어줍니다.

$('.OCbtn').click(function(){
     $('.OCbtn img').toggle(); $('.원하는클래스명 .sub_category_list').toggle(); });

<script>
$(function(){
    $('.category_list li:nth-child(n) > a').addClass('원하는클래스명');
    $('.category_list .원하는클래스명 .sub_category_list a').removeClass('원하는클래스명');
    $('.OCbtn').insertAfter('.원하는클래스명 > a');
    $('.OCbtn').click(function(){
    	$('.OCbtn img').toggle();
    	$('.원하는클래스명 .sub_category_list').toggle();
    });
})
</script>

 

4) 마지막으로 보기 좋게 CSS 디자인하면 끝!

아래 CSS는 예시로, 스킨에 따라 커스텀이 필요할 수 있습니다.

.OCbtn{
    display: inline-block;
    margin-left: 5px;
}
.OCbtn CL{
    display: none;
}
.원하는클래스명 .sub_category_list{
    display: none;
}

 

↓ 사전 작업의 n값이 2일 때, 모든 과정을 완료한 뒤의 결과물 ↓

• 모든 글 보기
  • 카테고리1 이름
  • 카테고리2 이름
    • 하위 카테고리1 이름
  • 카테고리3 이름