Collapsible Output Sections without JS

Sometimes the output is very long and deeply nested, that could be solved with collapsible Regions as follows:

<div class="collapse">
    <input type="checkbox" id="{uuid}">
    <label for="{uuid}">
        {title}
    </label>
    <div class="content">
        {content}
    </div>
</div>

input[type="checkbox"] {
    display: none;
}
.collapse {
    border: 1px solid black;
    border-radius: 5px; 
}
label {
    display: block;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px; 
    background-color: lightgray;
}
.content {
    display: none;
    padding: 10px;
}
input:checked ~ .content {
    display: block;
}

(in the autotool some of the selectors may need to be more specific)

Result

Explanation

this works without JavaScript only by reacting to the toggled checkbox, the important thing is that each collapse in the output needs a unique id for the checkbox.

Possible Realization

In the autotool this could be realized by extending the Output Type by adding a Collapse Constructor.