Collapsible Node Categories

[Steve F]

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.

Open template...

Read more about this resource...

 

[DL6]

I tested it in the default style with all add-ons disabled and it does not work

 

[Steve F]

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?

 

[Steve F]

@DL6 you may have missed my edit above, could you check on those?

 

[DL6]

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

FInd:

<div class="block-body">

replace:

<div class="block-body is-active">

/* 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]

Yea just updated the resource description with this

Find:

<div class="block-body">

Replace with:

<div class="block-body block-body--collapsible is-active">

Sorry

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

 

[DL6]

Yea just updated the resource description with this

Find:

<div class="block-body">

Replace with:

<div class="block-body block-body--collapsible is-active">

Sorry

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

Thanks, now is working following the steps.

 

[JoyFreak]

You know what would be great ?

If you could make a guide for widgets, I would love you, like forever and ever.

 

[Steve F]

It would require an add-on.

 

[JoyFreak]

I would still love you.

 

[Pamir Kiziltug]

Thank you. Is there any code to load all forum in collapsed?

 

[Brettflan]

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.

 

[Steve F]

I missed your post, my apologies. It is stored locally in the users browser but I do have some possible changes coming but do not have an ETA for that.

 

[Brettflan]

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]

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


For anyone else who prefers that look as well, replace this section:

        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }

With this:

        &.is-active:before
        {
            content: "\f106";
        }
        &:before
        {
            content: "\f107";
            font-weight: 900;
        }

 

[Idhae]

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

search:

/(<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:

<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]

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:

<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...

 

[Brettflan]

Steve F updated Collapsible Node Categories with a new update entry:

Collapse improvements

Awesome, thanks for the improvements.

 

[AbuGhaith]

it's the same change with 2.0.4

 

[sbj]

Any way to make the subforum list collapsible?