편집 요약 없음 태그: 되돌려진 기여 |
편집 요약 없음 태그: 되돌려진 기여 |
||
| 3번째 줄: | 3번째 줄: | ||
document.addEventListener("DOMContentLoaded", function() { | document.addEventListener("DOMContentLoaded", function() { | ||
// | // .custom-toggle를 클릭하면 다음 형제 요소(.custom-content)가 접히고 펼쳐짐 | ||
$('.custom-toggle').click(function() { | |||
$(this).next('.custom-content').slideToggle(); | |||
}); | }); | ||
// | // 접기/펼치기 기능 추가 - foldable-header | ||
var foldableHeaders = document.querySelectorAll('.foldable-header'); | var foldableHeaders = document.querySelectorAll('.foldable-header'); | ||
foldableHeaders.forEach(function(header) { | foldableHeaders.forEach(function(header) { | ||
| 37번째 줄: | 22번째 줄: | ||
}); | }); | ||
}); | }); | ||
// 접기/펼치기 기능 추가 - fold-toggle | // 접기/펼치기 기능 추가 - fold-toggle | ||
function toggleFold(button) { | function toggleFold(button) { | ||
2024년 9월 27일 (금) 08:59 판
/* ReferenceTooltip 스크립트 로드 */
mw.loader.load('//en.wikipedia.org/w/index.php?title=MediaWiki:Gadget-referenceTooltips.js&action=raw&ctype=text/javascript');
document.addEventListener("DOMContentLoaded", function() {
// .custom-toggle를 클릭하면 다음 형제 요소(.custom-content)가 접히고 펼쳐짐
$('.custom-toggle').click(function() {
$(this).next('.custom-content').slideToggle();
});
// 접기/펼치기 기능 추가 - foldable-header
var foldableHeaders = document.querySelectorAll('.foldable-header');
foldableHeaders.forEach(function(header) {
header.addEventListener('click', function() {
var content = this.nextElementSibling;
if (content.style.display === 'none' || content.style.display === '') {
content.style.display = 'block';
this.innerHTML = '[ 접기 ] ' + this.innerHTML.replace('[ 펼치기 ]', ''); // 접기 상태 텍스트
} else {
content.style.display = 'none';
this.innerHTML = '[ 펼치기 ] ' + this.innerHTML.replace('[ 접기 ]', ''); // 펼치기 상태 텍스트
}
});
});
// 접기/펼치기 기능 추가 - fold-toggle
function toggleFold(button) {
var table = button.closest('table'); // 버튼이 포함된 표
var rows = table.querySelectorAll('.foldable-row'); // 'foldable-row' 클래스를 가진 모든 행
var isVisible = rows[0].style.display !== 'none'; // 첫 번째 행이 보이는지 여부로 접기/펼치기 상태 확인
// 모든 행의 display 속성을 토글
rows.forEach(function(row) {
row.style.display = isVisible ? 'none' : '';
});
// 버튼 텍스트 변경
button.textContent = isVisible ? '[ 펼치기 ]' : '[ 접기 ]';
}
// 모든 'fold-toggle' 버튼에 클릭 이벤트 리스너 추가
var toggleButtons = document.querySelectorAll('.fold-toggle');
toggleButtons.forEach(function(button) {
button.addEventListener('click', function() {
toggleFold(button);
});
});
});