How can I make this box widget collapse?

[cannabis ape]

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.

 

[Russ]

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

 

[cannabis ape]

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

It's your code ?

 

[Russ]

This HTML + CSS should work:

HTML:

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

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

This HTML + CSS should work:

HTML:

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

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

 

[Russ]

.block.block-collapse h3:before
{
content: "\f352" !important;
}

Should do the trick.

 

[cannabis ape]

.block.block-collapse h3:before
{
content: "\f352" !important;
}

Should do the trick.

You're the man! Best support ever!