-
Notifications
You must be signed in to change notification settings - Fork 0
/
collapse.js
90 lines (81 loc) · 3.83 KB
/
collapse.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
document.addEventListener('DOMContentLoaded', function() {
var links = document.querySelectorAll('.toggle-link');
var allLists = document.querySelectorAll('ul');
var toggleAllLink = document.getElementById('toggle-all-link');
function createSvgIcon(direction) {
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('focusable', 'false');
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
svg.setAttribute('xmlns', 'https://www.w3.org/2000/svg');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('viewBox', '0 0 20 20');
svg.setAttribute('class', 'svg-icon ' + direction + '-icon');
svg.setAttribute('style', 'display: inline;');
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
if (direction === 'collapsed') {
path.setAttribute('d', 'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z');
} else {
path.setAttribute('d', 'M8.2 17.2L9.2 16.2 3.8 10.7 19 10.7 19 9.3 3.8 9.3 9.2 3.8 8.2 2.8 1 10z');
}
svg.appendChild(path);
return svg;
}
links.forEach(function(link) {
var targetId = link.getAttribute('data-target');
var targetList = document.getElementById(targetId);
var collapsedIcon = createSvgIcon('collapsed');
var expandedIcon = createSvgIcon('expanded');
expandedIcon.style.display = 'none';
link.appendChild(collapsedIcon);
link.appendChild(expandedIcon);
// Set initial link text based on initial state
if (targetList.classList.contains('collapse')) {
link.firstChild.nodeValue = 'Show Details';
} else {
link.firstChild.nodeValue = 'Hide';
collapsedIcon.style.display = 'none';
expandedIcon.style.display = 'inline';
}
link.addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default link behavior
targetList.classList.toggle('collapse');
// Update link text and icon based on the state
if (targetList.classList.contains('collapse')) {
this.firstChild.nodeValue = 'Show Details';
collapsedIcon.style.display = 'inline';
expandedIcon.style.display = 'none';
} else {
this.firstChild.nodeValue = 'Hide';
collapsedIcon.style.display = 'none';
expandedIcon.style.display = 'inline';
}
});
});
toggleAllLink.addEventListener('click', function(event) {
event.preventDefault(); // Prevent the default link behavior
var allCollapsed = Array.from(allLists).every(list => list.classList.contains('collapse'));
allLists.forEach(function(list) {
if (allCollapsed) {
list.classList.remove('collapse');
} else {
list.classList.add('collapse');
}
});
links.forEach(function(link) {
var targetId = link.getAttribute('data-target');
var targetList = document.getElementById(targetId);
var collapsedIcon = link.querySelector('.collapsed-icon');
var expandedIcon = link.querySelector('.expanded-icon');
if (targetList.classList.contains('collapse')) {
link.firstChild.nodeValue = 'Show Details';
collapsedIcon.style.display = 'inline';
expandedIcon.style.display = 'none';
} else {
link.firstChild.nodeValue = 'Hide';
collapsedIcon.style.display = 'none';
expandedIcon.style.display = 'inline';
}
});
this.firstChild.nodeValue = allCollapsed ? 'Hide Details' : 'Show Details';
});
});