Collapsible Shortcode

July 4th, 2015

If you’re here, I guess you’re interested in learning about how to use shortcode for collapsible elements!  If you haven’t read over the text in the newsletter yet (Greased 1.7), I’d suggest doing so first and then coming back here for examples.

First of all, let’s come up with some text we want to collapse.  Let’s flip to a page in a good book.  Ok, the following text is what will be expanded and collapsed; it will henceforth be referred to as the target content.

Well, I follow a literary occupation.  Author-journalist.  In fact we are just bringing out a collection of prize stories of which I am the inventor, something that is an entirely new departure.  I am connected with the British and Irish press.  If you ring up…

Now we need the trigger text (or just trigger), or in other words, the text that someone will click on to expand (and possibly collapse) this content with.  Using “click here” isn’t terribly original, but for the sake of clarity, let’s do it.  Here’s our trigger.

Click here to read a passage from James Joyce’s Ulysses

That might be a little bit longer of a phrase than you want to use, but we’re going to run with it for now.

So to reiterate, here’s the set up: someone visits the page and sees only the trigger.  Once they click the trigger, the target content will appear.  Got it?

I’ve added color to these examples to help you see the difference between different attributes – obviously this is not something you’ll be doing during actual implementation.

Title

Now let’s get to the attribute that you’ll probably always use, title. From the newsletter, you’ll already know that we need to wrap the target content in [expand] and [/expand] tags. To add the title, we need to add title in the opening tag. So here is the simplest iteration of collapsible content. Here’s how it’ll look in your editor:

Well, I follow a literary occupation.  Author-journalist.  In fact we are just bringing out a collection of prize stories of which I am the inventor, something that is an entirely new departure.  I am connected with the British and Irish press.  If you ring up…

This will yield the following result (click on the text to see it expand).

Swaptitle

Let’s move on to the swaptitle attribute. If you understood what we did above, this should be no problem. Using swaptitle will change what the trigger text says after it has been clicked. Rolling with our same example, let’s say you wanted it to say something as simple as “Read Less”. Here’s what it looks like in your editor:

Well, I follow a literary occupation.  Author-journalist.  In fact we are just bringing out a collection of prize stories of which I am the inventor, something that is an entirely new departure.  I am connected with the British and Irish press.  If you ring up…

And here’s the working example (click on the text to see it change):

If you don’t want the text to change at all, then simply omit swaptitle from your shortcode altogether. (Like the first example.)

Trigpos

Now let’s deal with trigpos, or trigger position. By default, the trigger text will appear the top of the target content. But you may want it to appear at the bottom, especially for longer sections of content. I’m going to go ahead and continue to use swaptitle as well, but keep in mind that if you don’t want the trigger text to change, you can leave it out. The trigger can only appear above or below the text. If it’s not used, the trigger will be above. If you want it below, you’ll simply add trigpos="below" to your tag.

Well, I follow a literary occupation.  Author-journalist.  In fact we are just bringing out a collection of prize stories of which I am the inventor, something that is an entirely new departure.  I am connected with the British and Irish press.  If you ring up…

The working example:

Expanded

In some cases, you may want the text to appear already expanded when the page is loaded. Let’s keep everything above the same, but this time, let’s have it already expanded. (Realistically, you may not want the trigger at the bottom if the content starts out expanded, but for the sake of this example, I don’t want to start changing up too much.) We’re going to use the expanded attribute. As usual, if we don’t include it at all, the text will start off collapsed, so to use this, we’ll add expanded="true" to our tag.

Well, I follow a literary occupation.  Author-journalist.  In fact we are just bringing out a collection of prize stories of which I am the inventor, something that is an entirely new departure.  I am connected with the British and Irish press.  If you ring up…

The shortcode in action:

Trigclass

I’m going to remove the expanded="true" tag from here on since it probably won’t be used much, but I’m going to keep all the other attributes in order to illustrate how they can all coexist.

For the next attribute, trigclass, we have a couple of options. This determines where the arrow will be. By default it appears on the left, but you can also have it appear on the right. To put it on the right, use trigclass="arrowright" and to get rid of the arrow altogether, use trigclass="noarrow". I’m not going to illustrate both since I think it’s pretty easy to imagine, but here’s what an example with a value of noarrow would look like:

Well, I follow a literary occupation.  Author-journalist.  In fact we are just bringing out a collection of prize stories of which I am the inventor, something that is an entirely new departure.  I am connected with the British and Irish press.  If you ring up…

Here it is, fully functional:

Tag

Now we’re going to move on to tag, where you can use predefined tags to stylize that trigger text. This is most useful for collapsible headings. If you want more specific information on what the various “h” tags do, contact me by email. For this example, let’s use a big-but-not-too-big h4. What h4 does is make the text larger, makes it green, and emboldens it. Since we can’t directly format the trigger text in the HTML editor, we have to use tag and the following attributes (startwrap and endwrap) which we’ll discuss in a minute. So let’s add tag="h4" to the mix:

Well, I follow a literary occupation.  Author-journalist.  In fact we are just bringing out a collection of prize stories of which I am the inventor, something that is an entirely new departure.  I am connected with the British and Irish press.  If you ring up…

And now you can see what it looks like:

Click here to read a passage from James Joyce's Ulysses

Read Less

Startwrap & Endwrap

Finally we’re going to discuss a more specific way to control what the trigger text looks like with startwrap and endwrap. You’d use these as an alternative to tag and not at the same time. This is also the only time that it’s safe to mix shortcode and HTML. (To an extent anyway, see my note after the next paragraph.) To enhance your trigger text, you can’t simply modify it in the Visual Editor – it just won’t work. Some of the predefined hx tags may help, but using startwrap and endwrap give you some added flexibility.  For the most versatile results, we’ll need to define everything, separately, as a certain tag.  (I’ll be glad to help with this, just let me know.)

This may seem confusing when you see shortcode and HTML mixed, but if you already know your way around HTML, this should be pretty easy. Now startwrap refers to the HTML you want to put before the trigger text, while endwrap refers to the closing tags. This example may seem a little complex, but I’m going all out to illustrate the versatility of it. Let’s say we want to do 2 things to our trigger text: 1) underline it, 2) embolden it. Here’s what startwrap would look like: startwrap="<u><strong>". Close everything with endwrap, which would look like: endwrap="</strong></u>".

Special Note: Unfortunately, we don’t have free reign to use any HTML we want in this situation. For HTML that uses inline CSS, the quotation marks screw everything up and they will not be read. This is a shame, but the good news is that we can use predefined tags to get around it. If this is a strong concern of yours, let me know and we’ll set up a special tag for your needs.

Here’s what it looks like:

Well, I follow a literary occupation.  Author-journalist.  In fact we are just bringing out a collection of prize stories of which I am the inventor, something that is an entirely new departure.  I am connected with the British and Irish press.  If you ring up…

And check out the final result!

Well, when it comes to collapsible text, that’s all for now. Keep in mind that you can put literally anything between the two expand tags: images, lists, and more! You can also format the target content however you like as well; it’s only the trigger text that you have to be careful with. You can even nest collapsible elements inside of each other:

If you’d like more information about creating collapsible elements you can either email me (TheCubist@NerdBacon.com). You may also want to check out the official documentation for the plugin as well by clicking here. This is a plugin that we actually purchased, so any and all features should be available.

Here’s a look at the various “h” tags and what they do for easy reference:

This is H1 – Huge text, unsuitable for most anything.

H2 – Smaller, but still really big.

H3 – Big but not too big, good for high level titles.

H4 – My go-to choice for section titles, Top 10 entries, etc.

H5 – Small but strong

H6 – Like h5, but smaller

H7 – Regular Size, Dark Green
H8 – Yellow, slightly smaller, italicized
H9 – Slightly smaller, “NB Green”
H20 – Larger text, “NB Green” H21 – Regular font size, “NB Green” H22 – Slightly bigger, “NB Green,” emboldened H23 – Regular size, “NB Green,” italicized