• This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Collapse categories with checkbox

CyberAP

Well-known member
This is mostly a proof of concept. With 2 template edits you can create a checkbox that will collapse the desired category on click. The cons: the input button state can't be saved and after a refresh all the forums will revert to their original state.

Template 'node_category_level_1', add after
Code:
<xen:if is="{$category.description}"><blockquote class="nodeDescription baseHtml">{xen:raw $category.description}</blockquote></xen:if>
        </div>
 
    </div>
this code:
Code:
    <input class="checkbox" type="checkbox" />


The open extra.css and add:
Code:
.node.level_1
{
    position: relative;
}
 
.checkbox
{
    position: absolute;
    right: 10px;
    top: 8px;
}
 
.node .checkbox:checked + .nodeList
{
    height: 0;
    visibility: hidden;
}

It will look like this:

scr.webp
 
With pseudo-classes.

input[type="checkbox"].checkbox
{
position: relative;
z-index: 500;
}

input[type="checkbox"].checkbox:after
{
content: " ";
position: absolute;
z-index: 2;
top: 0;
right: 0;
bottom: 0;
left: 0; /* should resize the box to the input original size, otherwise you may use width and height (remove position: absolute; then) */
/* your custom styling like background-image or border-radius, etc... */
}

Selector by type is used to ignore non-browsers like IE.
 
Top Bottom