How can I make this box widget collapse?

cannabis ape

Customer
I took the HTML and CSS from you to make the HTML widget in the screenshot. I could 2 questions.

One how can I make it a drop down/collapseable widget like you did on BHW and 2 How can I cange that Icon?

I tried some HTML and CSS but that was made for a menu and can't figure it out how I do it for the HTML widget.

Cheers.

Screenshot_2021-02-18 WordPress Solutions Forum.png
 

Russ

Pixel Exit Staff
What is your current HTML and CSS? Can you post it here? I can try to help post a solution later today.
 

Russ

Pixel Exit Staff
This HTML + CSS should work:

HTML:
Code:
<div class="block block-collapse">
        <div class="block-container">
                <h3 class="block-minorHeader">Site Features<span class="collapseTrigger collapseTrigger--block {{ !is_toggled('_custom-block') ? ' is-active' : '' }}" data-xf-click="toggle" data-xf-init="toggle-storage" data-storage-type="cookie" data-target=".block-collapse .block-body" data-storage-key="_custom-block"></span></h3>

<ul class="block-body block-row block-body--collapsible {{ !is_toggled('_custom-block') ? ' is-active' : '' }}">
    <li><a href="#">Forums</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">What's New</a></li>
    <li><a href="#">Members</a></li>
</ul>
    </div>
</div>
CSS:
Code:
.block-collapse
{
    .block-minorHeader span
    {
        float: right;
    }
    ul
    {
        a
        {
            display: block;
            padding: 5px 0;
        }
        li
        {
            border-bottom: 1px solid @xf-borderColor;
            &:last-child { border-bottom-width: 0; }
        }
    }
}
 

cannabis ape

Customer
This HTML + CSS should work:

HTML:
Code:
<div class="block block-collapse">
        <div class="block-container">
                <h3 class="block-minorHeader">Site Features<span class="collapseTrigger collapseTrigger--block {{ !is_toggled('_custom-block') ? ' is-active' : '' }}" data-xf-click="toggle" data-xf-init="toggle-storage" data-storage-type="cookie" data-target=".block-collapse .block-body" data-storage-key="_custom-block"></span></h3>

<ul class="block-body block-row block-body--collapsible {{ !is_toggled('_custom-block') ? ' is-active' : '' }}">
    <li><a href="#">Forums</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">What's New</a></li>
    <li><a href="#">Members</a></li>
</ul>
    </div>
</div>
CSS:
Code:
.block-collapse
{
    .block-minorHeader span
    {
        float: right;
    }
    ul
    {
        a
        {
            display: block;
            padding: 5px 0;
        }
        li
        {
            border-bottom: 1px solid @xf-borderColor;
            &:last-child { border-bottom-width: 0; }
        }
    }
}
Awesome! It had a different width though until I ticked the advanced mode box, I'm also tried to change the >>Icon and tried several stuff from the Xenforo forum but these only work for the standard widgets not for the HTML one, how can I changed that one?
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.