본문안에 접기, 펼치기 기능 추가하기

본문안에 접기, 펼치기 기능을 추가하여 평상시에는 보이지 않다가 필요시 클릭하여 볼 수 있게 하는 기능을 티스토리에서 쓸 수 있게 하는 방법이다. 아주 간단하니 금방 적용 할 수 있다. 2가지만 추가해주면 된다.

 

첫번째

상단에 보이는 '기본모드'를 'HTML'로 변경해준다.

변경 후 아래의 코드를 HTML 편집기에 복사하고 넣고자하는 내용으로 수정하면 된다.

 

클릭해서 펼쳐지게 할 제목이나 키워드를 여기에 적으세요.

 

여기에는 숨겼다가 펼쳐지면 보이게 하고 싶은 내용을 넣으세요.

 

두번째

다음은 티스토리의 관리자모드에서 왼쪽에 '꾸미기' 안에 있는 '스킨 편집'을 누르면 화면이 바뀌면서 오른 편에 스킨 편집 화면이 나오는데 여기에 보면 'html 편집'이 보일 것이다. 여길 누른다. 그러면 또 화면이 바뀌는데 'HTML'로 활성화되어 있을 것이다. 'CSS'라는 것을 클릭한다. 마우스 스크롤을 제일 마지막까지 내린 후 보이는 코드 밑에다가 아래의 내용을 복사하고 붙여넣으면 된다.

details[open] > summary:first-of-type {
    list-style-type: disclosure-open;
}

details > summary:first-of-type {
    display: list-item;
    counter-increment: list-item 0;
    list-style: inside disclosure-closed;
}

 

끝