engineering/remarkbox
1
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add CSS animation for node-children collapse/expand

Browse source
This commit is contained in:
Russell Ballestrini 2025-12-20 06:26:53 -05:00
parent 89abc7e7af
commit e0fbd06e10
2 changed files with 24 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

11
remarkbox/static/css/common.css
View file

@ -452,6 +452,17 @@ form.node-action {
}
}
/* Node children collapse/expand animation */
[id^="node-children-"] {
overflow: hidden;
max-height: 10000px;
transition: max-height 0.8s ease-out;
}
[id^="node-children-"].toggle-collapsed {
max-height: 0;
}
.my-namespaces-div {
display: none;
position: absolute;

13
remarkbox/static/js/custom.js
View file

@ -46,6 +46,19 @@ function toggle(target, button, off_text, on_text) {
if (typeof on_text === 'undefined') on_text = 'hide';
var el = document.getElementById(target);
var btn = document.getElementById(button);
// Handle node-children collapse (visible by default, toggle to hide)
if (target.indexOf('node-children-') === 0) {
if (el.classList.contains('toggle-collapsed')) {
el.classList.remove('toggle-collapsed');
btn.textContent = on_text;
} else {
el.classList.add('toggle-collapsed');
btn.textContent = off_text;
}
return;
}
if (el.classList.contains('toggle-open')) {
// Animate close, then update text
el.classList.add('toggle-closing');