MyBB Community Forums

As per the title, I would need to turn the "Show Spoiler" and "Hide Spoiler" button into text.

<div align="left"><div style="margin: 5px 20px 20px;"><div style="text-align: left; padding: 4px; background: #222; repeat-x scroll 0% 0% transparent; -moz-border-radius:5px; color:#ffffff; text-shadow:0 -1px #4B7926; font-weight:bold; width:100%">Spoiler: <input type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Nascondi Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Mostra Spoiler'; }" style="width: 150px; font-size: 13px; margin: 0px; padding: 0px;" value="Mostra Spoiler"></div><div class="quotecontent"><div style="padding: 4px; background:#222; -moz-border-radius:5px; display: none; width:100%">$1</div></div></div></div>

To change the "Show Spoiler" and "Hide Spoiler" button to text, you need to modify the HTML code in MyBB that generates the spoiler button. Specifically, you need to replace the input tag with a simple text tag.

Here's the modified code that shows the spoiler button as text:

<div align="left">
  <div style="margin: 5px 20px 20px;">
    <div style="text-align: left; padding: 4px; background: #222; repeat-x scroll 0% 0% transparent; -moz-border-radius:5px; color:#ffffff; text-shadow:0 -1px #4B7926; font-weight:bold; width:100%">
      Spoiler:
      <span style="cursor: pointer;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = 'Hide Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'Show Spoiler'; }">
        Show Spoiler
      </span>
    </div>
    <div class="quotecontent">
      <div style="padding: 4px; background:#222; -moz-border-radius:5px; display: none; width:100%">$1</div>
    </div>
  </div>
</div>

As you can see, I replaced the <input> tag with a <span> tag that contains the "Show Spoiler" text. I also added a cursor: pointer; style to the span tag so that it looks clickable.

I modified the onclick event of the span tag to toggle the visibility of the spoiler content and change the text of the span tag to "Hide Spoiler" when the spoiler is shown, and "Show Spoiler" when the spoiler is hidden.

Note that this modified code uses inline styles, which may not be the best practice. You may want to move the styles to an external CSS file to make the code cleaner and easier to maintain.