Collapsible Node Categories

Collapsible Node Categories

Steve F

Well-known member
Steve F submitted a new resource:

Collapsible Node Categories - Simple collapsible nodes for your users

Here we have a simple way to give your users the ability to collapse nodes they are not interested in. Their choices are saved so when they refresh the page or re-visit your site the nodes they had closed will still be closed.


I will only support default styles, no 3rd party styles will receive support. Along with that if you use a Pixel Exit style this is already built into each style. :p

Open template...
Read more about this resource...
 

DL6

Well-known member
I tested it in the default style with all add-ons disabled and it does not work :(
 

Steve F

Well-known member
I’ll check the steps again when I get back to my desk I may have missed something.

Edit: do the icons appear and are clickable? Any console errors?
 
Reactions: DL6

DL6

Well-known member
Yes, the icons appear and are clickable, no errors in the console.
Edit: i made this changes and now works for me

FInd:
HTML:
<div class="block-body">
replace:
HTML:
<div class="block-body is-active">
Less:
/* Node Collapse */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            margin-right: auto;
            max-width: 100%;
        }
    
    .block-body
    {
        transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        -webkit-transition-property: all, -xf-opacity;
        transition-property: all, -xf-opacity;
        overflow-y: hidden;
        height: 0;
        -webkit-transition-property: all, -xf-height;
        transition-property: all, -xf-height;
        &.is-active
        {
            height: auto;
        }
    }
}

/* Node Collapse end */
 

Steve F

Well-known member
Yea just updated the resource description with this

Find:
Code:
<div class="block-body">
Replace with:
Code:
<div class="block-body block-body--collapsible is-active">
Sorry :p

P.S.: editing code with a iPad in the ACP is a PITA, lol..
 
Reactions: DL6

DL6

Well-known member
Yea just updated the resource description with this

Find:
Code:
<div class="block-body">
Replace with:
Code:
<div class="block-body block-body--collapsible is-active">
Sorry :p

P.S.: editing code with a iPad in the ACP is a PITA, lol..
Thanks, now is working following the steps.
 

Brettflan

Member
I hope you don't mind me asking, but where is the data actually stored for tracking collapsed categories for each user? I'm new to XenForo in general. I can see it's using the "data-target" and "data-storage-key" values and so forth to make XenForo store the data, but I'm unable to find any info on how that actually works. Google and even the search functionality of the XenForo site here didn't turn up anything useful on how those work.
 

Brettflan

Member
Cool, I'm personally fine with that. We have a very large forum, so anything to help keep server performance up is a plus.
 

Brettflan

Member
By the way, I personally like the more traditional chevron icon for it.

collapse.png
For anyone else who prefers that look as well, replace this section:
CSS:
        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
With this:
CSS:
        &.is-active:before
        {
            content: "\f106";
        }
        &:before
        {
            content: "\f107";
            font-weight: 900;
        }
 

Idhae

Member
nice work, thanks.
You can do the TMS part in one step with regex:

search:
HTML:
/(<div class="block block--category block--category{\$node\.node_id}">)(.*<h2 class="block-header">)(.*<div class="block-desc">{\$node\.description\|raw}<\/div><\/xf:if>)(.*<\/h2>)(.*<div class="block-body">)/s

replace:
HTML:
<div class="block block--category block--category{$node.node_id} collapsible-nodes">
$2
<div class="block-header--left">
$3
</div>
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-xf-init="toggle-storage" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>
$4
<div class="block-body block-body--collapsible is-active">
 

Steve F

Well-known member
Steve F updated Collapsible Node Categories with a new update entry:

Collapse improvements

With the release of XF 2.0.3 we can now use a cookie to store the toggle state of the collapsed nodes which means when the page is loaded the collapsed nodes will load collapsed, before there was a noticeable flicker on page load as the storage type was only stored locally in a users browser.

The changes are:

Before:
Code:
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-xf-init="toggle-storage"...
Read the rest of this update entry...
 
Top