Announcement

Collapse
No announcement yet.

Adjusting a Spoiler BBCODE

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Adjusting a Spoiler BBCODE

    Hey guys,

    So at the moment I am using a SPOILER BBCODE on my site, which works great. The only issue is that if for instance I insert a paragraph of text within Spoilers, the BBCODE places a dotted line around each of the sentences, which looks awful messy. Please see the current issue below:

    Click image for larger version

Name:	Opened Spoiler.jpg
Views:	61
Size:	158.3 KB
ID:	4421232

    Is there a way to have 1 dotted line that encompasses all the text within the spoiler ? See example below as per the red box:

    Click image for larger version

Name:	Opened Spoiler Corrected.jpg
Views:	33
Size:	192.8 KB
ID:	4421233

    At the moment the code that is operating the Spoiler BBCODE is as below, I am assuming I need to adjust something within that code to get it to do what I want.

    Code:
     
     <span style="cursor:pointer; border:1px solid red;padding:2px; color:red" onclick="this.nextSibling.style.display='';this.style.display='none'" title="Click to show content">SPOILER</span><span style="display:none; cursor:pointer; border:1px dotted #000; padding:2px" onclick="this.previousSibling.style.display='';this.style.display='none'" title="Click to hide content">{param}</span>
    Thanks in advance !

  • #2
    Try changing your Span tags to DIV tags. You're applying a border to an inline element so you get the effect you have. Changing to a block element should put the border around the block.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API - Full / Mobile
    Vote for your favorite feature requests and the bugs you want to see fixed.

    Comment


    • #3
      Ok thanks

      So ultimately the revised code would look like

      Code:
       
       <div style="cursor:pointer; border:1px solid red;padding:2px; color:red" onclick="this.nextSibling.style.display='';this.style.display='none'" title="Click to show content">SPOILER</span><span style="display:none; cursor:pointer; border:1px dotted #000; padding:2px" onclick="this.previousSibling.style.display='';this.style.display='none'" title="Click to hide content">{param}</div>
      Correct ?

      Thanks very much.

      Comment


      • #4
        Ok so that worked, awesome ! For anyone interested this is the final code that gets it working well

        Code:
        <div style="cursor:pointer; border:1px solid red;padding:2px; color:red; width:73px" onclick="this.nextSibling.style.display='';this.style.display='none'" title="Click to show content">SPOILER</div><div style="display:none; cursor:pointer; border:1px dotted #000; padding:2px" onclick="this.previousSibling.style.display='';this.style.display='none'" title="Click to hide content">{param}</div>

        Comment

        widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
        Working...
        X