Replies: 2 comments
-
Use https://requarks.canny.io/wiki to submit feature requests. |
Beta Was this translation helpful? Give feedback.
0 replies
-
Please extent wiki.js like below: .collapseTitle {
margin-top: 1em;
padding: .5em;
background-color: #607d8b;
color: #fff;
border: 1px solid #607d8b
}
.collapseTitle[collapse=true]:before {
content: "\f036";
display: inline-block;
font-family: Webdings;
margin-right: .5em
}
.collapseTitle[collapse=false]:before {
content: "\f035";
display: inline-block;
font-family: Webdings;
margin-right: .5em
}
.collapseTitle:hover:before {
transform: rotate(360deg);
transform-origin: center;
transition: .5s
}
.collapseContent {
padding: .5em;
border: 1px solid #ccc;
margin-bottom: 1em
} Body HTML Injection, add: <script>
function processNode(node) {
var div = document.createElement("div");
div.className = 'collapseTitle';
var collapse = node.getAttribute("value") == 'true' ? true : false;
div.setAttribute('collapse', collapse);
div.innerHTML = node.getAttribute("display");
div.addEventListener("click", function(obj) {
var b = obj.srcElement.getAttribute('collapse') == 'true' ? true : false;
obj.srcElement.setAttribute('collapse', !b);
obj.srcElement.nextSibling.style.display = obj.srcElement.nextSibling.style.display =='none' ? 'block' : 'none';
});
node.style.display = collapse ? 'none' : 'block';
node.parentNode.insertBefore(div, node);
}
document.body.onload = function() {
var nodes = document.getElementsByClassName("collapseContent");
for (node of nodes) {
processNode(node);
}
}
</script> Then you can add |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
An option that I find sorely lacking in the present iteration is the option for collapsible headings. In particularly long articles, being able to collapse sections (particularly when such a section has long blocks of code for example) would be really nice.
Currently it's possible to kind of emulate this by using
{.tabset}
and creating a structure like this, but that is obviously not intended functionality or particularly intuitive.What I'm proposing is something like a custom
{.collapse}
variable for headings, or maybe even one that takes arguments, e.g.{.collapse:always}
for headings that default to collapsed state.Beta Was this translation helpful? Give feedback.
All reactions