New spoiler/accordion syntax

Site Updates forum

Posted on May 6, 2015, 8:13 p.m. by yeaGO

Hey look a spoiler!!!! Show

It was hidden now its not.
Nothing that interesting.


===spoiler:Hey look a spoiler!!!!

[[deck-large:haze-frog-spits-on-fools]]

===endspoiler

===accordion

===panel:Hey look I made a spoiler of stuff!

It was hidden now its not.

===endpanel

===panel:I wonder what's here when you click.

Nothing that interesting.

===endpanel

===endaccordion

Espair says... #1

Oh nice, I will try using this :o)

May 9, 2015 10:24 a.m.

HolyFalcon says... #2

It's working everywhere but the first "Creatures" tab on my deck,


Keep Calm and Counter On. | Bant Control Playtest

Standard Magicrafter

SCORE: 48 | 11 COMMENTS | 8461 VIEWS

How to put spaces?

May 10, 2015 4:56 p.m.

Epochalyptik says... #3

You have a double endpanel at the bottom. Also, use <p> or <br /> tags to insert line breaks.

May 10, 2015 5:03 p.m.

HolyFalcon says... #4

tank u epoch

May 10, 2015 6:01 p.m.

hyperlocke says... #6

Copy/Paste-ing and editing the source code,

But I would like to have an easier way of nesting accordions. Maybe restrict it to 2 or 3 levels, to avoid shenanigans of any sort. Also, you can nest spoilers this way, but they don't seem to use IDs, so a click on the outermost button opens all the inner buttons...

May 11, 2015 12:27 p.m.

StormBroken says... #7

Out of sheer curiosity, do the single star italics [italics] and the double star bold [bold] still work in the new spoiler format? If not, what's the new way?

May 12, 2015 3:37 p.m.

hyperlocke says... #8

*italic with asteriks*
italic with < i >
**bold with asteriks**
bold with < b >

So yeah, the site-intern formatting symbols don't work in spoilers, you have to use basic html tags. Surround your text with < i > and < b > tags for italic and bold font (without spaces, the closing tag with a slash: < /i >). For line breaks use a single < br >, for paragraphs (like hitting enter 2 times on here), surround the text with < p > tags.

For more tags use google; a simple guide can be found here.

EDIT: Wooooooo, edit button!

May 12, 2015 8:11 p.m. Edited.

NoviceMagician says... #9

How would one insert an accordian into a panel? For example:

===accordion===panel: Panel ABlah.
Blah blah.

===endpanel===panel: I don't want any panels within this one.Blah bleh blah.===endpanel===endaccordion

May 19, 2015 7:51 a.m.

InDirectX says... #10

you don't

May 19, 2015 7:52 a.m.

InDirectX says... #11

Only the chosen ones are allowed to wield double accordions.

Either that, or some weird html things.

May 19, 2015 8:05 a.m.

filledelanuit says... #12

Weird html.

If you make two accordians and paste on inside of the other (using the html code). Make sure that the accordians have different ids otherwise it won't work.

May 19, 2015 1:03 p.m.

hyperlocke says... #13

Copy this code, replace the colored ids with your own unique ones, change panel heading and body.

To get nested accordions, paste this code in the panel body section.


<div class="panel-group" id="ACCORDION_ID" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="HEADING_ID">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#ACCORDION_ID" href="#COLLAPSE_ID" aria-controls="COLLAPSE_ID">
PANEL HEADING
</a>
</h4>
</div>
<div id="COLLAPSE_ID" class="panel-collapse collapse" role="tabpanel" aria-labelledby="HEADING_ID">
<div class="panel-body">
PANEL BODY
</div>
</div>
</div>
</div>


Don't muck around with this if you don't know what you're doing!
It gets confusing really fast; when testing with it, I broke some part of my test site more than once.

To get this example, I wrote a little piece of R code. For those inclined to do this (you need to have R installed), I uploaded it to my Dropbox.

I'm a panel!
Let's add a level...
Down the rabbit hole...
Inception!
We need to go deeper!
Let's leave it at that...
Whew, back at last.
May 19, 2015 1:14 p.m.

Thanks guys! :)

May 19, 2015 5:49 p.m.

Wizmin says... #15

Is there a way to put hyperlinks into the spoiler text? I tried "link text" but it doesn't seem to work in the spoiler text.

May 24, 2015 8:13 p.m.

hyperlocke says... #16

@zachofpotatoes: The site specific syntax doesn't work in spoilers (yet?), you have to use html.

To link something, use <a href="URL">LINK TEXT</a>

May 25, 2015 12:49 p.m.

DeathChant17 says... #17

Is it not possible to use bullet points inside panels?

* when i try to use bullet points it doesn't work.

May 30, 2015 4:24 p.m.

hyperlocke says... #18

  • circle bullet
  • disk bullet
  • disc bullet

Again, use HTML! These bulletpoints are done through a list:

<ul type="circle">
<li>circle bullet
<li>some other entries
</ul>
May 30, 2015 4:51 p.m.

klone13 says... #19

what happened to my marath deck?

May 30, 2015 5:04 p.m.

hyperlocke says... #20

@klone13: Post your code!

===code

your description code here

===endcode
May 30, 2015 5:39 p.m.

Why isn't the contents showing? Is it being moved to the formatting page?

June 25, 2015 3:52 p.m.

HolyFalcon says... #22

Forums are broken.

June 25, 2015 3:55 p.m.

Quarion65 says... #23

Bullet points and lists don't seem to work inside. Am I doing something wrong?

September 12, 2015 2:01 p.m.

hyperlocke says... #24

@Quarion65: Standard T/O syntax doesn't work inside accordions and spoilers. You have to use HTML. Look here for HTML code.

You can get bullet points with < li > (without spaces):

===accordion
===panel: Bullet Points
<li>Point 1
<li>Point 2
===endpanel
===endaccordion

  • Point 1
  • Point 2
  • You can get lists with < ul > or < ol > (unordered and ordered list, respectively), you have to close those with < /ul > or < /ol >.

    ===accordion
    ===panel: Unordered List
    <ul>
    <li>Point 1
    <li>Point 2
    </ul>
    ===endpanel
    ===panel: Ordered List
    <ol>
    <li>Point 1
    <li>Point 2
    </ol>
    ===endpanel
    ===endaccordion
    

    • Point 1
    • Point 2

    1. Point 1
    2. Point 2

    September 12, 2015 4:31 p.m.

    hyperlocke I'm legitimately glad I came here right now. I was curious about the bullet point thing to begin with. Much thanks!

    September 12, 2015 4:32 p.m.

    hyperlocke says... #26

    No problem.

    September 12, 2015 4:38 p.m.

    Testing

    123 123

    mic check mic check

    September 30, 2015 11:53 p.m.

    Umm, yeaGO, is there any way to still bold words and such?

    October 1, 2015 12:02 a.m.

    yeaGO says... #29

    bold (nowadays called emphasis) is just normal markdown syntax with text between two asterisks.

    **bold**
    
    October 1, 2015 12:26 a.m.

    hyperlocke says... #30

    **bold with asterisks**
    bold with < b >

    SwaggyMcSwagglepants: In spoiler and accordions you have to use HTML for now. Read the comments above yours as to how to do it.

    yeaGO: That's what I meant with questions about syntax in accordions and spoilers...

    October 1, 2015 6:41 a.m. Edited.

    baddabiiing says... #31

    Thank the lord, now my deck is purrdy.


    ALL THE WARRIORS!!! Playtest

    Standard baddabiiing

    SCORE: 16 | 6 COMMENTS | 2126 VIEWS


    October 4, 2015 1:58 a.m.

    yeaGO says... #32

    fixed this up

    October 8, 2015 5:45 p.m.

    hyperlocke says... #33

    bold with asterisks

    italic with asterisks

    link to Google

    • list entry 1
    • list entry 2

    paragraphs with an empty line

    Great stuff, thanks yeaGO!

    October 9, 2015 7:03 a.m.

    baddabiiing says... #34

    HELP! My accordions aren't working, and I don't know why!


    ALL THE WARRIORS!!! Playtest

    Standard baddabiiing

    SCORE: 20 | 8 COMMENTS | 2812 VIEWS


    October 10, 2015 1:26 p.m.

    hyperlocke says... #35

    @baddabiiing: Please post your code.

    ===code
    your code goes here
    ===endcode
    
    October 10, 2015 2:27 p.m.

    baddabiiing says... #36

    hyperlocke its long so I put it in a spoiler.

    code Show

    October 10, 2015 4:57 p.m.

    hyperlocke says... #37

    Test Show

    Works for me. Another user (dragon_slayer in this thread) has the same problem. Seems like non-upgraded users can't use accordions right now.

    Spoilers work though, so for now I suspect an error in the site's code. yeaGO?

    October 10, 2015 5:07 p.m.

    baddabiiing says... #38

    hyperlocke Thanks for the help, ill switch them to spoilers. Its odd it was working fine and I didn't change anything.

    October 10, 2015 9:39 p.m.

    baddabiiing says... #39

    Actually, its working again. Happy, but confused.

    October 10, 2015 9:40 p.m.

    DemonDragonJ says... #40

    When I make a new post, I no longer see all the buttons at the top of the text box, which is bothersome, since I now need to type every tag manually, and I cannot recall how to make certain tags; when shall that issue be resolved?

    October 24, 2015 9:34 p.m.

    tempest says... #41

    hey guys. on my deck The Elements Cannot be Braved (8 more!), there's an issue with the first nested accordion thats causing an error now that i'm trying to edit the deck. the issue stems from my using a regular accordion formula rather than hyperlocke's complicated one, but it works perfectly fine on the actual deck page. help?

    the coding

    November 7, 2015 12:09 a.m. Edited.

    hyperlocke says... #42

    @tempest: Well, as you said, it works on your deck page, and it works in comments. What error do you get?

    I couldn't find any obvious mistakes in your code, at least regarding accordions.

    What I did see was that you didn't close your lists (except for one), though it seems you wanted to. Use < /ul > or < /ol >. You either closed the last list entry (< /li >) or started a new list inside your existing one. I don't think this causes the problem, but unclosed tags are sloppy and can disrupt the site.

    November 7, 2015 6:17 a.m.

    tempest says... #43

    The error I'm getting is preventing from making changes to the deck because of the description. this is what shows up

    Errors

    • Description: 3 panels outside accordions
    • Descriptions are required for non-private decks. They are a great way to indicate what type of feedback you are looking for for your deck

    I'll probably have to implement your code later when i have the time, but I'm curious as to why its giving me this error at the same time its working just fine

    November 7, 2015 8:17 a.m.

    hyperlocke says... #44

    That's odd. I tested it on one of my decks, and it gives the same error. Converting everything into HTML works, though. yeaGO?

    Copy your code into this little program I wrote a while ago and put the converted code into your description.

    November 7, 2015 2:13 p.m.

    tempest says... #45

    hyperlocke- am i supposed to open it in dropbox? or...

    November 8, 2015 1:49 a.m.

    hyperlocke says... #46

    Download the zip file, unpack it, run the jar file inside.

    November 8, 2015 4:25 a.m.

    tempest says... #48

    how irritating. hyperlocke, i enabled chat with you so we can work out the issue

    November 9, 2015 3:08 a.m.

    hyperlocke says... #49

    @ Epochalyptik: Seems like the spammers are at it again... yizhuza

    @tempest: OK, let's talk there.

    November 9, 2015 5:11 a.m.

    Ammo37 says... #50

    November 25, 2015 11:40 p.m.

    This discussion has been closed