목차의 길이가 길 경우에는 목차를 접어 두는 것이 보기에 좋다. 또한 목차를 접어 두면 웹사이트 방문자가 스크롤해야 하는 부담도 줄일 수 있다.
본 글은 목차를 열고 닫고, 펼치고 접는 기능을 적용하는 3가지 방법에 대한 내용이다.
추가로 일전 발행한 본문 자동 목차 콘텐츠에서 이어지는 내용임을 참고 바란다.
미리 보기
본 글의 결과물이다.
① 목차가 접힌 상태로 출력
② 접힌 상태에서 클릭 시 슬라이딩 효과로 펼쳐지고, 'Open'에서 'Close'로 변경
③ 펼쳐진 상태에서 클릭 시 슬라이딩 효과로 접히고, 'Close'에서 'Open'으로 변경
1] 방법 ① _ details & summary
첫 번째 방법은 details 및 summary 코드를 사용하는 것이다.
1-1] details & summary 소개
방법 설명 전에 details 및 summary가 어떤 코드인지 알아보겠다.
1-1-1] details
아래 HTML 코드를 삽입하면
<details>내용을 입력하세요</details>
아래와 같이 나타난다.
<details> ~ </details> 사이에 있는 내용을 '세부 내용'으로 간주해서 보이지 않게 하고, 자동으로 '화살표' 및 '세부 정보'가 생성된다.
1-1-2] details & summary
아래 HTML 코드를 삽입하면
<details>
<summary>클릭하세요</summary>
내용을 입력하세요</details>
아래와 같이 나타난다.
자동으로 생성됐던 '세부 정보'가 <summary> ~ </summary> 사이에 있는 내용으로 변경된다.
1-1-3] details & summary & style
아래 HTML 코드를 삽입하면
<details>
<summary>클릭하세요</summary>
내용을 입력하세요</details>
<style>
summary {list-style: none;}
summary::-webkit-details-marker {display: none;}
</style>
아래와 같이 '화살표'가 제거된다.
1-2] details & summary 접목
아래 코드는 본문에 서식으로 삽입했던 기존 '자동 목차 코드'에 details 및 summary 코드를 접목시킨 코드다.
// 기존 '자동목차 코드'
<div class="book-toc">
<p data-ke-size="size16">▶ Contents</p>
<ul id="toc"></ul>
</div>
// 새로운 '자동목차 코드'
<div class="book-toc">
<details>
<summary><p data-ke-size="size16">▶ Contents</p></summary>
<ul id="toc"></ul>
</details>
</div>
<style>
summary {list-style: none;}
summary::-webkit-details-marker {display: none;}
</style>
1-3] 서식 생성 방법
새로운 '자동 목차 코드'의 서식을 생성해 보겠다.
기존 '자동 목차 코드'의 서식을 생성할 때는 코드를 'HTML 모드'에서 삽입했는데, 새로운 '자동 목차 코드'의 서식을 생성할 때는 코드를 'HTML 블록'으로 삽입해야 한다. ('HTML 모드'에서 삽입하면 'details' 및 'summary' 코드가 삭제된다.)
1-4] 방법 ①의 결과
'방법 ①'의 결과다.
① 목차가 접힌 상태로 출력
② 클릭 시 펼쳐지고 접히지만 슬라이딩 효과는 없음
③ 클릭 시 'Opne ↔ Close' 변경 없음
2] 방법 ② _ onclick
두 번째 방법은 onclick 코드를 사용하는 것으로 '방법 ①'과 같은 방식이다.
2-1] onclick 접목
아래 코드는 본문에 서식으로 삽입했던 기존 '자동 목차 코드'에 onclick 코드를 접목시킨 코드다.
기존 코드 중 <ul id="toc">에 style="display: none;"을 삽입해야 목차가 접힌 상태로 출력된다.
// 기존 '자동목차 코드'
<div class="book-toc">
<p data-ke-size="size16">▶ Contents</p>
<ul id="toc"></ul>
</div>
// 새로운 '자동목차 코드'
<div class="book-toc">
<p id="toc-toggle" onclick="openCloseToc()" data-ke-size="size16">Contents 열기</p>
<ul id="toc" style="display: none;"></ul>
</div>
<script>
function openCloseToc() {
if(document.getElementById('toc').style.display === 'block') {
document.getElementById('toc').style.display = 'none';
document.getElementById('toc-toggle').textContent = 'Contents 열기';
}
else {
document.getElementById('toc').style.display = 'block';
document.getElementById('toc-toggle').textContent = 'Contents 닫기';
}
}
</script>
<style>
#toc-toggle {cursor: pointer;}
#toc-toggle:hover {text-decoration: underline;}
</style>
2-2] 방법 ②의 결과
'방법 ②'의 결과다.
① 목차가 접힌 상태로 출력
② 클릭 시 펼쳐지고 접히지만 슬라이딩 효과는 없음
③ 클릭 시 '열기 ↔ 닫기' 변경 구현
3] 방법 ③ _ click & slideToggle
세 번째 방법은 click 및 slideToggle 코드를 사용하는 것이다.
3-1] HTML 편집
아래 코드는 'HTML 편집'에서 삽입했던 기존 '자동 목차 코드'에 click 및 slideToggle 코드를 접목시킨 코드다.
[ 19 ]
본문에서 book-toc div 코드를 삽입하는 곳에 목차가 생성된다는 내용이다.
[ 21 ]
opacity의 숫자 '0.5'를 변경해서 투명도를 변경할 수 있다.
[ 24 ]
숫자 '500'을 변경해서 슬라이딩되는 속도를 변경할 수 있다.
// 기존 '자동목차 코드'
<script>
$(document).ready(function () {
var $toc = $("#toc");
$toc.toc({
content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"
});
if ($(".another_category").length > 0) {
$toc.find("li:last").remove();
}
});
</script>
// 새로운 '자동목차 코드'
<script>
$(function() {
(function() {
const $opencloseToc = $('div.book-toc').first();
if ($opencloseToc.length === 1) {
$opencloseToc.after('<div class="book-toc"><p id="clickToc">Contents <span style="opacity:0.5;">Open</span></p><ul id="toc" style="display: none;"></ul></div>').remove();
$('#clickToc').click(function(e) {
const $this = $(this);
$('#toc').slideToggle(500, function() {
$(this).is(':visible') ? $this.find('span').html('Close') : $this.find('span').html('Open');
});
})
var $toc = $("#toc");
$toc.toc({
content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"
});
if ($(".another_category").length > 0) {
$toc.find("li:last").remove();
}
}
})();
});
</script>
3-2] 서식 생성
아래 코드는 본문에 서식으로 삽입할 book-toc div 코드다.
<div class="book-toc"></div>
3-3] 방법 ③의 결과
'방법 ③'의 결과로, 앞서 '미리 보기'에서 본 것과 동일하다.
