Collapsible Node Categories

[ioneti]

I have the same problem as @gogo and @Nicolas FR
Did you find a solution? (V2.2.12)

Edit:
I ended up using the solution of @Brettflan
This is actually even better

Which solution?

 

[Brettflan]

Which solution?

I'm guessing the CSS change of icons to chevrons, posted back here:

Collapsible Node Categories

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

xenforo.com

 

[Joan1211]

Yes, that's correct. Change icons to chevrons.

But it would be very nice if someone could find a solution to fix the issue without having to change the button design.

 

[Joan1211]

@ioneti
Problem solved. I have commented margin-right of &is-active:before

Here is the complete code to have original buttons (not chevrons ones)

/* 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.block-body--collapsible
{
    transition: all 0.3s cubic-bezier(0.43, 0.01, 0.5, 1.5);
    -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;
}

 

[ioneti]

@ioneti
Problem solved. I have commented margin-right of &is-active:before

Here is the complete code to have original buttons (not chevrons ones)

/* 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.block-body--collapsible
{
    transition: all 0.3s cubic-bezier(0.43, 0.01, 0.5, 1.5);
    -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;
}

Un extra.less?

 

[Joan1211]

Un extra.less?

yes you put this code in extra.less

 

[ioneti]

yes you put this code in extra.less

This works on mobile?

 

[Joan1211]

This works on mobile?

Nope

 

[ioneti]

Nope

in my style, dimension from xenfocus, doesnt work on pc

 

[PhineasD]

Any option for 2.3?

 

[Steve F]

I haven't tested it so not entirely sure if it works or not. I'll look into it when I get a 2.3 instance going.

 

[hakyangler]

i tested it in 2.3.4 and it works smoothly



Edit : i got better results when I deleted the part.

 &.is-active:before

            margin-right: -8px; (delete)

 

[ventje]

Ik heb het getest in 2.3.4 en het werkt soepel

View attachment 313655

Edit : Ik kreeg betere resultaten toen ik het onderdeel verwijderde.

 &.is-actief:voor

marge-rechts: -8px; (verwijderen)

Hello, as described here it should work on the xenforo v2.3.4 but this does not work on my xenforo v2.3.4.. Is there perhaps another possibility?

 

[Mikethemix]

Hey guys, I really like the idea of Collapsable Categories / Nodes for our forum - which uses standard XF style
However we:
1. are not happy to do all the editing of templates shown above (lack of skill, and worried about ease of maintenance)
2. would prefer to use conventional up and down chevron style
3. need it to store the user's preferences, even if he logs out
4. would like to specify the default initial state - all collapsed - which would be how any new user would see the forum when they first logged in. All subsequent changes made by that user would be remembered so it would appear as it did when he last was logged in.
5. are currently using XF 2.2.16 and intend to migrate to 2.3.x as soon as all our add-ons are compatible

So, would it be possible to upgrade the existing excellent add-on Collapsible Category 2.5.0 to do the above please?
Hoping that is possible
Regards, Mike

 

[makanyane]

I've got this to work quite well for a grid display which gives an overlay that shows the expanded content when toggled. I need it to default to the collapsed view, which it does on Firefox, but Chrome defaults all the categories to expanded. Any Ideas?