Not a bug show/hide button disapears?

[Martyn]

Affected version

2.1

Spoiler seems to have issues on my forum?

it displays this:

then when you click it, the text goes, and doesn't come back no matter how much you press it

 

[Martok]

It doesn't happen here on this site so I'd guess it may be related to your style or an add-on you are using.

Try disabling all add-ons and testing in a completely edited default theme just to check this. Then enable add-ons and themes one-by-one until you find the culprit.

 

[Martyn]

disabled all my add-ons, and used the default basic untouched theme, still an issue?

 

[Martyn]

Before clicking

<button type="button" class="button" onclick="if (this.parentNode.parentNode.childNodes[1].style.display != '') { this.parentNode.parentNode.childNodes[1].style.display = ''; this.innerText = ''; this.title='Click to hide the spoiler.'; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.childNodes[1].style.display = 'none'; this.innerText = ''; this.title='Click to show the spoiler.'; this.value = 'Show Spoiler'; }">Show/Hide</button>

After clicking

<button type="button" class="button" onclick="if (this.parentNode.parentNode.childNodes[1].style.display != '') { this.parentNode.parentNode.childNodes[1].style.display = ''; this.innerText = ''; this.title='Click to hide the spoiler.'; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.childNodes[1].style.display = 'none'; this.innerText = ''; this.title='Click to show the spoiler.'; this.value = 'Show Spoiler'; }" title="Click to hide the spoiler." value="Hide Spoiler"></button>

the Show/Hide text seems to be missing from the it after clicking?

 

[Mike]

That's not standard code (and the look isn't the standard spoiler look) -- we wouldn't include any sort of onclick handler like that, so presumably the issue relates to something custom.

 

[Martyn]

That's not standard code (and the look isn't the standard spoiler look) -- we wouldn't include any sort of onclick handler like that, so presumably the issue relates to something custom.

I use UX.I theme, from themehouse, but the addon is disabled, (all are) and I guess its this that's causing issues? unsure why it's affecting an untouched default theme though.

 

[Martyn]

apparently UX doesn't use it either..

so what is causing this? our forums is a fresh install with just these addons installed..


But even with all these disabled, something must be acting maliciously?

The forums was freshly installed, and converted from vB, UX was installed then addons later on, default theme is 100% untouched, nothing has been edited on it...?

Spoiler

testing

 

[Martyn]

bbcode.less has

@_bbCodeBlock-spacing: .75em;
@_bbCodeBlock-paddingV: @xf-paddingMedium;
@_bbCodeBlock-paddingH: @xf-paddingLarge;
@_bbCodeBlock-expandTriggerHeight: (@xf-bbCodeBlockExpandHeight) / 2;

.bbCodeBlock
{
    margin: @_bbCodeBlock-spacing 0;
    .xf-bbCodeBlock();

    &.bbCodeBlock--quote
    {
        .bbCodeBlock-content
        {
            font-size: @xf-fontSizeSmall;
        }
    }
}

.bbCodeBlock-title
{
    padding: @_bbCodeBlock-paddingV @_bbCodeBlock-paddingH;
    .xf-bbCodeBlockTitle();
    .m-clearFix();
}

a.bbCodeBlock-sourceJump
{
    color: inherit;
    text-decoration: none;

    &:hover
    {
        text-decoration: underline;
    }

    &:after
    {
        .m-faBase();
        .m-faContent(@fa-var-arrow-circle-up, 1em);
        display: inline-block;
        margin-left: 5px;
    }
}

.bbCodeBlock-content
{
    position: relative;
    padding: @_bbCodeBlock-paddingV @_bbCodeBlock-paddingH;
}

.bbCodeBlock-expandLink
{
    display: none;
    position: absolute;
    top: (@xf-bbCodeBlockExpandHeight) + (@_bbCodeBlock-paddingV * 2) - (@_bbCodeBlock-expandTriggerHeight);
    left: 0;
    right: 0;
    height: @_bbCodeBlock-expandTriggerHeight;
    cursor: pointer;
    z-index: @zIndex-1;

    .m-gradient(
        fade(@xf-bbCodeBlock--background-color, 0%),
        xf-default(@xf-bbCodeBlock--background-color, transparent),
        transparent,
        0%,
        80%
    );

    a
    {
        position: absolute;
        bottom: @_bbCodeBlock-paddingV;
        left: 0;
        right: 0;
        text-align: center;
        font-size: @xf-fontSizeSmall;
        color: @xf-textColorAttention;
        text-decoration: none;
    }
}

.bbCodeBlock--screenLimited
{
    .bbCodeBlock-content
    {
        max-height: 300px;
        max-height: 70vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.bbCodeBlock--expandable
{
    overflow: hidden;
    .m-transition(-xf-height, height, padding, margin, border;);

    .bbCodeBlock-content
    {
        overflow: hidden;

        .bbCodeBlock:not(.bbCodeBlock--expandable) .bbCodeBlock-content
        {
            overflow: visible;
        }
        .bbCodeBlock.bbCodeBlock--screenLimited .bbCodeBlock-content
        {
            overflow: auto;
        }
    }

    .bbCodeBlock-expandContent
    {
        max-height: @xf-bbCodeBlockExpandHeight;
        overflow: hidden;
    }

    &.is-expandable
    {
        .bbCodeBlock-expandLink
        {
            display: block;
        }
    }

    &.is-expanded
    {
        .bbCodeBlock-expandContent
        {
            max-height: none;
        }

        .bbCodeBlock-expandLink
        {
            display: none;
        }
    }
}

.bbCodeBlock--unfurl
{
    .xf-contentHighlightBase();

    padding: @_bbCodeBlock-paddingV;
    width: 650px;
    max-width: 100%;
    border-left: @xf-borderSizeMinorFeature solid @xf-borderColorFeature;

    .contentRow-header
    {
        font-size: @xf-fontSizeNormal;
        font-weight: normal;
        .m-overflowEllipsis();
    }

    .contentRow-snippet
    {
        font-size: @xf-fontSizeSmaller;
        font-style: normal;
    }

    .contentRow-minor
    {
        font-size: @xf-fontSizeSmaller;
    }

    &.is-pending
    {
        opacity: 0.5;

        &.is-recrawl
        {
            opacity: 1;
        }
    }

    &.is-simple
    {
        .contentRow-figure
        {
            display: none;
        }
    }

    .bbCodeBlockUnfurl-icon
    {
        width: 12px;
        vertical-align: -2px;
    }
}

.bbCodeCode
{
    margin: 0;
    padding: 0;

    font-family: @xf-fontFamilyCode;
    font-size: @xf-fontSizeSmall;
    line-height: @xf-lineHeightDefault;
    -ltr-rtl-text-align: left;

    direction: ltr;
    white-space: pre;
    position: relative;

    .m-tabSize();

    code
    {
        font-family: inherit;
    }

    .prism-token
    {
        &.prism-comment,
        &.prism-prolog,
        &.prism-doctype,
        &.prism-cdata
        {
            color: #a50;
        }

        &.prism-constant
        {
            color: #05a;
        }

        &.prism-tag
        {
            color: #170;
        }

        &.prism-boolean
        {
            color: #219;
        }

        &.prism-symbol,
        &.prism-atrule,
        &.prism-keyword
        {
            color: #708;
        }

        &.prism-selector,
        &.prism-function
        {
            color: #05a;
        }

        &.prism-deleted
        {
            color: #d44;
        }

        &.prism-inserted
        {
            color: #292;
        }

        &.prism-string,
        &.prism-attr-value
        {
            color: #a11;
        }

        &.prism-number
        {
            color: #164;
        }

        &.prism-attr-name,
        &.prism-char,
        &.prism-builtin
        {
            color: #00c;
        }

        &.prism-regex,
        &.prism-important,
        &.prism-variable,
        &.prism-package
        {
            color: #05a;
        }

        &.prism-class-name,
        &.prism-important,
        &.prism-bold
        {
            color: #00f;
        }

        &.prism-bold
        {
            font-weight: bold;
        }

        &.prism-italic,
        &.prism-constant
        {
            color: #05a;
            font-style: italic;
        }

        &.prism-entity
        {
            cursor: help;
        }
    }
}

.bbCodeInline
{
    margin: 0;
    .xf-bbCodeInlineCode();
    font-family: @xf-fontFamilyCode;
    line-height: @xf-lineHeightDefault;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.bbCodeSpoiler
{
    margin: @_bbCodeBlock-spacing 0;
}

.bbCodeSpoiler-button
{
    .has-no-js & { display: none; }
}

.bbCodeSpoiler-content
{
    .m-hiddenEl(true);
    .has-no-js & { display: block !important; }

    > .bbCodeBlock--spoiler
    {
        margin: .2em 0 0;
    }
}

.bbCodeInlineSpoiler
{
    background-color: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0);
    text-shadow: @xf-textColorMuted 0 0 14px;
    cursor: pointer;

    &:hover
    {
        text-shadow: @xf-textColorMuted 0 0 10px;
    }
}

bb_code_tag_spoiler

<xf:css src="bb_code.less" />

<div class="bbCodeSpoiler">
    <xf:button class="bbCodeSpoiler-button{{ $title ? ' button--longText' : '' }}" data-xf-click="toggle"
        data-xf-init="tooltip" title="{{ phrase('click_to_reveal_spoiler') }}">

        <span>{{ phrase('spoiler') }}<xf:if is="$title">: <span class="bbCodeSpoiler-button-title">{$title}</span></xf:if></span>
    </xf:button>
    <div class="bbCodeSpoiler-content">
        <div class="bbCodeBlock bbCodeBlock--spoiler">
            <div class="bbCodeBlock-content">{$content}</div>
        </div>
    </div>
</div>

but why is it displayed like this on the browser?

<div class="bbWrapper"><small><b>Spoiler:</b></small><br>
<div style="border: 1px dashed gray; padding: 2px; margin: 5px;"><div><button type="button" class="button" onclick="if (this.parentNode.parentNode.childNodes[1].style.display != '') { this.parentNode.parentNode.childNodes[1].style.display = ''; this.innerText = ''; this.title='Click to hide the spoiler.'; this.value = 'Hide Spoiler'; } else { this.parentNode.parentNode.childNodes[1].style.display = 'none'; this.innerText = ''; this.title='Click to show the spoiler.'; this.value = 'Show Spoiler'; }">Show/Hide</button></div><div id="spoiler" style="display: none;"></div></div></div

 

[Martyn]

Turns out there was a bbcode for spoiler? unsure if this was done due to the transfer? but it messed up the default one..

what a long old week.