Greased Issues

Issue #17.1 December 4th, 2015 Volume 1
 

Mauve
Edition

Greased: The Nerd Bacon Newsletter (Logo)

Greased 1.17.1 - Collapsible Lists (2nd Method) Appendix

December 4th, 2015

Difficulty: 3 - 4

EasyDifficult

Several issues ago (it was in the 1.7.1 Appendix for Collapsible Content to be exact) we went over how to create collapsible content using shortcode provided by one of our many plugins. For this reason, I had to demonstrate the effect on Nerd Bacon proper rather than this little outside area I've been using for the online versions of Greased. The plugin works well and this isn't meant to discourage you from using it, I just want to provide what I think is a slightly simpler and easier way to remember way to do almost the same thing.

I'm going to be going into some semi-technical stuff here but I don't want that to scare you off. Much of it just an explanation. When it comes to what you actually have to do to implement these collapsible lists, it's only a very few lines of markup. I'll also be using a lot of CSS classes during the examples, and as of reading this, you should be able to use those very same classes (namely "collapsible," "destyle," and "restyle") with the exact same effects on the site itself. All of the CSS in this particular guide is already in the site's CSS file meaning all you have to do is copy/alter the HTML examples given to make this work for you - no CSS on your part! (At least not when working within the site.) So stick with it - you're just a few simple lines of HTML away from making your own collapsible lists on Nerd Bacon!

As mentioned, this "trick" is similar in effect to the shortcode I went over several issues ago. If you're interested in experimenting with both, read through this and then revist the 1.7.1 Appendix. Keep in mind that you can use this CSS trick anywhere (locally, W3C's "TryIt" Editor, etc.) as long as the correct CSS is in place, but the shortcode method will only work on NB proper.

As always, here are a few quick guidelines worth going over before jumping in:

  1. Before starting, save your work!
  2. Use Preview to see the effect of your changes.
  3. Don't mess with anything other than what's instructed (unless you know what you're doing!)
  4. Work in small increments, saving your work when successful.

There's also the W3C Try-It Editor, a quick and easy tool you can use in your browser that's perfect for testing something like borders.

Stictly speaking, this method only applies to lists and not "collapsible content" in general. However, we can generously "de-style" lists to such a degree that they act identically to collapsible content in general. I'll touch on this a little bit at the end, though we're going to stay within traditional lists for most of this guide. I do want to stress that you don't have to use this technique to lists - although we will be using lists from a structural/coding standpoint, it's still easy to create treat this material as more generalized "content."

Here's an example of what we'll be learning how to do:

Alright, so that might not be so practical for anything we'll be writing in a review, but that's the concept in action. In reality, we'll probably be using it more like this:

An Introduction

As of the publication of this guide, all the applicable CSS has been inserted into the site's CSS file, so you can play with this stuff on-site as soon as you'd like! For any CSS nuts out there, there's a relatively small bit of CSS responsible for this trick:

.collapsible li > input + * {
display: none;
}

.collapsible li > input:checked + * {
display: block;
}

.collapsible li > input {
display: none;
}

.collapsible label {
cursor: pointer;
}

This uses some of the more obscure CSS rules related to forms, and I'm not going to go into explaining it, though I did want to show how short the coding was. What you will need to understand is the anatomy of a list and more specifically lists within lists. You can count on WordPress to create these lists for you, but since we may not always be making actual lists, it might be good to have a fundamental understanding of what we're working with before we start applying the above principles.

Back in 1.15.1 (on HTML lists), I go over the basics of a list. If the next few sentences start to sound confusing, you may want to refer back to that issue for some additional explanation. Like I said, what's really important here is understanding the exactitudes behind creating lists within lists since this is what you will always be doing when using this method. Even at its most basic level an item or items on the first (outermost) list will act as a "trigger" for opening a lower level list. Stylistically speaking this may not satisfy your needs, but stick with me, because at the end we're going to de-style everything and then do the exact same thing so that it looks like regular ol' text triggering regular ol' text.

And one last thing before we get started - you probably won't have to code these lists manually. Making them with WP's Visual Editor should put everything in the right place. Even so, it's important to understand exactly what's going on in order to use this stuff.

Ok, so to kick off a list, we use either the <ul> or <ol> tags. There are plenty of instructions in 1.15.1 about how to style lists, and they are applicable here if you should need them. Remember that ul designates an unordered list where items appear with bullet points, and ol is used for an ordered list, or one where the items are marked in sequence using letters or numbers. Either can be used for collapsible content depending on your needs. For the purpose of this guide I'll be sticking with ul, but know that you can also use ol unless otherwise noted.

The <ul> tag starts off the list in general, but we need to use <li> for each individual entry on the list. (The tag 'li' literally stands for "list item.") Each item needs to be closed with </li>, and when all items have been listed, the entire list is closed with </ul>. This should all be pretty basic, but I'll go through one quick example. Let's say we wanted to list 3 colors: aquamarine, taupe, and silver. Here's what the raw HTML would look like, followed by the result:

Raw HTML

<ul>
<li>aquamarine</li>
<li>taupe</li>
<li>silver</li>
</ul>

Result

  • aquamarine
  • taupe
  • silver

Easy stuff so far, right? Well get ready to pay attention, even if you think you know what's going on, because here's where it gets nitpicky. When you create a list within a list, the inner list must be a part of the <li> tag for this trick to work. That may not mean much to you right now, but remember it.

When we make a list inside of a list, it descends from one of the other list items. Let's say we wanted to add 2 items under the item "taupe" - beige and cream. We need to create that new list not only within our top-level list, but also within the corresponding item. I don't normally indent my HTML since Notepad+ makes it pretty simple to keep track of open tags, but indentation can and will make this process easier to keep up with if you plan on going several levels deep. I'm not sure if my words are making much sense right now, so just take a look at what "beige" and "cream" listed under "taupe" would look like:

Raw HTML

<ul>
<li>aquamarine</li>
<li>taupe
<ul>
<li>beige</li>
<li>cream</li>
</ul>
</li>
<li>silver</li>
</ul>

Result

  • aquamarine
  • taupe
    • beige
    • cream
  • silver

Notice that I did not close the li tag for "taupe" until after I'd finished making the secondary list. Let's look at a slightly more involved example. This time we're going to list "turquoise" under "aquamarine" and then "teal" under turquoise. I'm also going to color code each set of opening and closing tags so that you can get even more of a visual on how the inner lists take place entirely within an li element.

Raw HTML (with Color-Coding)

<ul>
<li>aquamarine
<ul>
<li>turquoise
<ul>
<li>teal</li>
</ul>
</li>
</ul>
</li>
<li>taupe
<ul>
<li>beige</li>
<li>cream</li>
</ul>
</li>
<li>silver</li>
</ul>

Result

  • aquamarine
    • turquoise
      • teal
  • taupe
    • beige
    • cream
  • silver

Does that make a bit more sense now? The reason I'm relentlessly trying to pound this concept in is because you may see lists within lists treated differently, with the li tags closed before the inner list begins. I don't know if it's really "the wrong way," but containing the entire inner ul within the corresponding li is at the very least more correct. If you close the li tags on a "regular" list you shouldn't notice any difference; however, with the "trick" that we'll be learning, we must contain those ul's inside of li's. Using the same color coding from above, I'm going to show you what "the wrong way" looks like, even though it yeilds an identical final result.

Raw HTML (with Color-Coding)
"The Wrong Way"

<ul>
<li>aquamarine</li>
<ul>
<li>turquoise</li>
<ul>
<li>teal</li>
</ul>
</ul>
<li>taupe</li>
<ul>
<li>beige</li>
<li>cream</li>
</ul>
<li>silver</li>
</ul>

 
Result

  • aquamarine
    • turquoise
      • teal
  • taupe
    • beige
    • cream
  • silver

You'll notice that the end result is exactly the same - and yes, I actually changed the coding to reflect the HTML on the left - but I'm going to say it one more time: the trick will not work if the list is coded like this.

Creating Collapsible Lists

If you can firmly grasp how a list within a list is supposed to look, you'll have no trouble with the rest of this. I'm not going to launch into in-depth explanations about why we're doing what we're doing at this point (it's an abstract application of working with forms that's difficult to put into words without going into lots of other stuff first), I'm just going to tell you what to type and where to put it.

Let's start with the simplest example possible - clicking on a single list item that opens up a child list with a single item. Here's what it'll look like:

Now let's make sure we're all on the same page. Without the "trick" applied, the above list would look like the following. If you understand, you're ready to move on!

<ul>
<li>Click here to expand!
<ul>
<li>Expanded content!</li>
</ul>
</li>
</ul>

Our first order of business is to class any necessary ul tags as "collapsible" (this is what we've named the class using CSS). In this case, we only need to class the outermost ul as "collapsible," but if we wanted the text "Expanded content!" to also become clickable, we'd need to class that ul as "collapsible" as well. Here's what we've changed, in blue:

<ul class="collapsible">
<li>Click here to expand!
<ul>
<li>Expanded content!</li>
</ul>
</li>
</ul>

Remember, every collapsible list must have the "collapse" class - this means that your uppermost layer will always need it and that your lowermost list will never need it.

Part of the magic here happens in the actual li tag itself, which is why I'v been so anal about getting those tags in the right place. What we're going to do now is create a label. The actual label name - the part in quotes - can be anything you want it to be, but it needs to be different for every collapsible element within a document. When you move on to a new page or post you can reuse labels, but they must all be different within the same document. I suggest using something like "node" and appending numbers on the end as needed. For example, your first collapsible element at the top level can be "node1". Your second at the top level could be "node2". Let's say you've got a really complicated list and you need a label for your 4th third-level collapsible element under your 2nd second-level element, itself under your 5th top-level element. Using this system, it'd have the label "node5-2-4". You can devise whatever system you like - you can label them "Angus," "jogging," "nova," and "glishick" if you want to, just be sure to keep up with what belongs where. I'll go over a more complex example later; for now we're going to insert the appropriate label text in red with the "node1" label.

<ul class="collapsible">
<li><label for="node1">Click here to expand!</label>
<ul>
<li>Expanded content!</li>
</ul>
</li>
</ul>

Take notice of a couple of things. First of all, the label tag begins after the opening li tag, but before the actual trigger text. The label tag must also be closed, immediately following the trigger text. Ultimately this (and the next bit) is why we need the next ul entirely inside of the li tag. This "trick" is "expanding" whatever ul's are within the labeled li; therefore, anything outside of the labeled li tag won't be affected.

Now we're going to add some more of the "magic." Again, I'm not going to bother explaining everything that's happening, just take a look at what we add next, shown in rose.

<ul class="collapsible">
<li><label for="node1">Click here to expand!</label>
<input type="checkbox" id="node1" />
<ul>
<li>Expanded content!</li>
</ul>
</li>
</ul>

This probably looks unfamiliar to you, but don't worry. Again, this "trick" is derived from CSS used typically for forms. Bring your attenion to "id" within the tag we just added. Notice anything? That's right, the value for "id" ("node1" in this case) must be exactly the same as the label we specified in the previous step. These two must match for any given collapsible element. When you move on to a new element, you'll choose a value and use it for both "label" and "id". Also note that in this particular instance, the input tag is an "empty" or "self-closing" tag, meaning we do not need to include "</input>" anywhere; we just need to remember the backslash ( / ) prior to the final, closing arrowhead ( > ).

And guess what? That is it! That's all you'll need to use for a basic collapsible list! Technically it doesn't ever get any more complicated than this, but keeping up with all the tags can make things seem much worse than they are. Let's look at something just a little more involved - 2 expandable elements at the top-level and one nested element at the second level. Also remember that all elements within the same document must have a different label. Although I've used "node1" in several examples, know that in the actual coding I am having to use different labels to avoid conflict. When you start playing with this on your own, jut remember that you can only use each label once per document!

      • Some Content
    • Some More Content

Now let's see what the raw markup looks like, color coded and indented. Since the label and input tags always begin and end on the same row, they will be shown in gray.

<ul class="collapsible">
<li><label for="node1">Expand 1</label>
<input type="checkbox" id="node1" />
<ul class="collapsible">
<li><label for="node1-1">Expand 1-2</label>
<input type="checkbox" id="node1-1" />
<ul>
<li>Some Content</li>
</ul>
</li>
</ul>
</li>
<li><label for="node2">Expand 2</label>
<input type="checkbox" id="node2" />
<ul>
<li>Some More Content</li>
</ul>
</li>
</ul>

Not too difficult, right? Just keep those li tags opened and closed at the right times and you should be good. As I said, WordPress should code the lists the "correct way" anyway, so chances are you won't have to mess with most of this stuff beyond adding the label and input tags. Now for a real challenge: take a gander at the beast below!

Admittedly this example is really out there, but I wanted to show what several different situations would look like. I'm not going to go through all the trouble of color coding or even identing all of this raw markup, though I did provide the label names I used to give you an example of how to organize the information. Should you want to play around with this or look at it more closely, right-click on the text box below, choose "Select All," right-click again to "Copy," and then paste it wherever you'd like. Any questions? I'm glad to help!

Turn a Collapsible List into Collapsible Content

Early on I remarked that one of the advantages of the plugin we already use was that it collapsed any content in general, whereas this little CSS trick only works with lists. We can't change that part - it's always only going to work with lists - but what we can do is start redefining just what a list is! The simplest rendering of this trick involves a list with a single item, and that single item spawning a list with another single item. Before applying the collapsible trick, that looks like this:

So all we need to do is get the above to look like something a little different! Back when we turned vertical lists into horizontal ones, we learned a thing or two about de-styling lists and taking some of these default properties away. Now we obviously don't want to affect every single list, so we'll need to come up with CSS rule that defines a class which does away with the default styling. The most noticeable issues when it comes an unordered list are 1) the bullet points and 2) the spacing/indentation. So let's see what we can come up with, and let's call our class "destyle" (don't worry if the CSS is confusing - you don't need to know how to do this, I'm just walking you through the process).

ul.destyle {
list-style-type: none;
margin: 0;
padding: 0;
}

Catching on? Next we're going to put this chunk of CSS into effect and class both ul tags from the previous example as "destyle." Let's see what it looks like...

  • Top Level (Trigger)
    • Child List (Content)

Not too shabby eh? That's the exact same raw HTML we used before, only with the new CSS rule applied. The best part is that we can still create lists within the collapsible content, all we have to do is not apply the "destyle" class the ul that we want to use as an actual list. Now we know how to 1) make proper lists within lists, 2) apply the CSS trick, and 3) make the "list" not look like a "list." Now let's get ready for the big application - combining our new "destyle" class with the CSS trick, using our above "simplest case scenario" example.

Raw HTML

<ul class="collapsible destyle">
<li><label for="node1">Top Level (Trigger)</label>
<input type="checkbox" id="node1-1" />
<ul class="destyle">
<li>Child List (Content)</li>
</ul>
</li>
</ul>

Result

    • Child List (Content)

Ain't it cool? Now imagine how that would look if you had a lot of text to expand/collapse. Where "Top Level (Trigger)" is would be the title and/or an annotation like "Click here for more!" and "Child List Content" could be replaced with whatever you want - entire paragraphs worth of text if need be! We can also use even more CSS rules to spruce it up further and give it a more refined appearance (and I'll be glad to take requests and put it in the site's main CSS file for you to use). For instance, let's say we wanted an actual paragraph break between the "trigger" and "content" instead of just a line break. Let's also indent the content to give it a little more of that nested feel. To start with, we'll need a new CSS rule (we still want to be able to use "destyle" if we need it) and we're going to use the old rule as our starting point - why don't we call this new rule "restyle".

ul.restyle {
list-style-type: none;
margin: 1em 0;
padding: 0;
}

ul.restyle ul li {
padding-left: 30px;
}

Alright, we've made just a few small changes for "restyle" here. First of all we're giving each ul the same margins that a paragraph would have. Secondly, we're giving any and all li tags with a ul that itself is contained within a ul a left padding of 30px (the indentation). Now why did we only do items within lists that are already within a "restyle" list? This is to stop that very first li - the trigger - from being indented as well. A somewhat easier way to do it would be to define a special li class, though this would also mean more coding on the HTML side of things. However, it would also allow a greater degree of control over each list item; both are acceptable and whether or not one is "better" than the other depends on your needs. Realistically, the above CSS should take care of simple cases where you have a single trigger and a single body of content (no further nested collapsible elements). If you do require continued spacing and indentation, it's probably just best to stick with the list format and not worry about "restyling" (or "destyling") the defaults to begin with. At any rate, let's take a look at this new CSS rule in action!

    • Child List (Content)

You could even add further li tags to act as paragraph breaks if you wanted to hide a lot of content or just break it up effectively. Here is essentially the same example (a single collapsible element) but this time there are 3 list items and I've included some "lorem ipsum" text to simulate the look of a paragraph. You'll see that the "list-y-ness" has disappeared!

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit at orci et scelerisque. Morbi non tempor massa. Cras rutrum viverra massa. Aenean malesuada, turpis nec scelerisque viverra, risus nunc accumsan lectus, eget maximus diam lacus id turpis. Etiam in facilisis erat. Proin venenatis metus nec tincidunt convallis. Proin at tempus dolor, in laoreet erat. Donec eget gravida erat. Curabitur eget ultricies nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec a finibus dui.
    • Aliquam scelerisque nunc sed justo convallis semper. Sed vel ante in justo laoreet egestas. In tempus nunc sed augue commodo, at vulputate massa facilisis. Quisque accumsan auctor nisi, eu blandit odio. Curabitur maximus, magna eget tincidunt convallis, enim odio varius felis, vulputate fringilla nulla leo ut sem. Cras ultricies fringilla mattis. Pellentesque facilisis scelerisque sapien quis feugiat. Sed dolor felis, elementum ut tortor ac, luctus hendrerit velit. Integer eu eros scelerisque, convallis augue non, bibendum lectus. Vestibulum vel tristique neque.
    • Nullam consequat pretium libero sit amet dictum. Aenean tincidunt tortor non ante consequat, tristique tincidunt risus ultricies. Sed porta hendrerit nisl in interdum. Etiam sit amet nisi ultricies, facilisis orci vel, facilisis velit. Nulla quis ultricies ipsum. Proin vel ultricies est, sit amet placerat ante. Vestibulum volutpat massa vel mi efficitur, ac ultrices nulla pretium. Nulla facilisi. Phasellus luctus ante sit amet cursus facilisis. Nullam gravida id dui nec luctus.

And with that, I think we've adequately moved from "collapsible list" to "collapsible content." I can't imagine that you'd need anything much more complex than the example provided above, but if you do, I'll be happy to help! If you would, stick with me for just one more section that quickly addresses the styling of both trigger text and content, a task that could be somewhat difficult using the shortcode from the plugin.

Styling the Trigger Text (and Content)

One limitation of the plugin that gives us collapsible content was that it could be very difficult to style the actual trigger text without access to the plugin's options. The trigger text itself was contained in the shortcode - not wrapped with tags (or shortcode) - so it was impossible to use WP's Visual Editor (or the Text Editor) to change what the trigger text looked like. In order to do so, one would have to go into the plugin's options and essentially custom define a tag. For instance, let's say we wanted to render the trigger text in small caps, italicized, with an overline, in a crimson (#bf0040) color, with a black background, some slightly glowing text, and a font size of 30px (fairly large). Yes, that is an extreme example, but I wanted to add lots of modifications to prove a point. Now if we wanted to affect some "normal" text like this, we'd just use something like a span tag to define each of these properties. It would be a fair bit of coding, but relatively simple, and would look something like this:

<span style="color: #bf0040; background: black, text-shadow: 0 0 4px #00ff7f; font-variant: small-caps; font-style: italic; text-decoration: overline; font-size: 30px;">Trigger Text</span>

However, the plugin doesn't let us do that. Either using the site's external CSS or the plugin's options, we have to define an entire tag with these properties. That means we have to write a CSS rule and assign these properties and values to an arbitrary "tag" that will then be used by the shortcode. Why don't we call it "crazy"? So, we go to the either the plugin options or the external CSS file and write the following rule:

crazy {
color: #bf0040;
background: #000;
text-shadow: 0 0 4px #00ff7f;
font-style: italic;
text-decoration: overline;
font-variant: small-caps;
font-size: 30px;
}

Then we go back to our shortcode and tell it to wrap the trigger text in this new tag, "crazy." Sure, it works, but it's a really convoluted way of styling the text. Plus it's a bit unnecessary to add and define something like this "crazy" tag that we may only use once. The method can be helpful if you're constantly defining large numbers of triggers with the same styling, but it is wildly inconvenient when you want something a little different once in a while.

The good news is that since our new trick uses the text within an li tag as the trigger text, we can go on styling that li text however we want! We just wrap the text with whatever changes we want (making sure they appear within the li tag) and that's it! You can even use WordPress' Visual Editor to highlight the relevant text and change the color, size, embolden, italics, etc. just like you would any other normal text! Here's what that "crazy" trigger text would look like, just for fun:

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit at orci et scelerisque. Morbi non tempor massa. Cras rutrum viverra massa. Aenean malesuada, turpis nec scelerisque viverra, risus nunc accumsan lectus, eget maximus diam lacus id turpis. Etiam in facilisis erat. Proin venenatis metus nec tincidunt convallis. Proin at tempus dolor, in laoreet erat. Donec eget gravida erat. Curabitur eget ultricies nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec a finibus dui.
    • Aliquam scelerisque nunc sed justo convallis semper. Sed vel ante in justo laoreet egestas. In tempus nunc sed augue commodo, at vulputate massa facilisis. Quisque accumsan auctor nisi, eu blandit odio. Curabitur maximus, magna eget tincidunt convallis, enim odio varius felis, vulputate fringilla nulla leo ut sem. Cras ultricies fringilla mattis. Pellentesque facilisis scelerisque sapien quis feugiat. Sed dolor felis, elementum ut tortor ac, luctus hendrerit velit. Integer eu eros scelerisque, convallis augue non, bibendum lectus. Vestibulum vel tristique neque.
    • Nullam consequat pretium libero sit amet dictum. Aenean tincidunt tortor non ante consequat, tristique tincidunt risus ultricies. Sed porta hendrerit nisl in interdum. Etiam sit amet nisi ultricies, facilisis orci vel, facilisis velit. Nulla quis ultricies ipsum. Proin vel ultricies est, sit amet placerat ante. Vestibulum volutpat massa vel mi efficitur, ac ultrices nulla pretium. Nulla facilisi. Phasellus luctus ante sit amet cursus facilisis. Nullam gravida id dui nec luctus.

Styling the interior text is really easy, and you can do it within WP's Visual (or Text) Editor. The interior text is also a list item, so everything stays the same. With the plugin, the content was similarly "configurable" within WP - it was only the trigger text that was so frustrating to change. In a nutshell you can do whatever you want to the collapsible/expandable content - as you always could - only now you'll be able to do the exact same thing to the trigger text without a hassle.

Limitations

It's up to you which you find easier: the shorcode or this new CSS trick. The plugin isn't going anywhere and all the necessary CSS for this "trick" is in the site's external CSS at this point, so you're free to use whichever you like best or feel more comfortable with. I've spent a large part of this guide showing you just how we can make these collapsible lists not look like a list at all, and I'd be willing to bet that for all but the most complex of circumstances, you can pretty much do with one method what you can with the other.

However, there is one last thing that I want to point out. Our "collapsible content" plugin utilizes some degree of JavaScript (which is infinitely more powerful than CSS when it comes to client-side interaction) while this "trick" is pure CSS. Clearly there are going to be aspects that this trick can't replicate, though I don't see them as wildly important. Depending on what exactly you're going for though, aspects like these could make all the difference. Here are some of the major things available with the plugin that can't be replicated with the CSS trick (or at the very least, I don't know how to replicate them).

  1. The ability to have the trigger text change position once clicked. The plugin allows the trigger text to either stay above the content or to appear beneath the content. With this CSS trick, the trigger text always appears above the content.
  2. The plugin supports small images which can be changed depending on the status of the collapsible element, i.e. one symbol/image appears next to the trigger text if the content is expanded and a different image/symbol appears if it is collapsed. There might be away to do this with a few additions to the CSS that makes the trick possible, but right now that's beyond my comprehension. When and if I take the time to figure it out, I'll give you guys and gals an update.
  3. The plugin "remembers" which elements were expanded/collapsed even when the user moves away from the page. This is done via cookies and is 100% impossible with the CSS trick. Were we constructing some sort of menu, this function would be absolutely necessary.
  4. We can also define whether or not individual elements should be expanded or collapsed when the page loads using the plugin. This is another aspect that might be possible with the CSS trick but if so, is unknown to me at this time. Using the CSS trick, all collapsible elements are collapsed upon page load.

I'm sure there are some other bells and whistles that I'm missing. The plugin is actually pretty nice and includes a wealth of features, especially since we have the fully functional, paid version at our disposal, so don't be afraid to use it if that's what works best for you. I'm not sure if you'll find the CSS trick any easier or not; I do, but I also have a decent handle on HTML and adding those couple of lines to an existing list - to me - is a bit easier than remembering all the variables that can go into the shortcode necessary for creating collapsible content.

If you'd like to take another look at the shortcode and do your own comparisons, go back to Issue 1.7.1 for the complete rundown. You'll notice that the shortcode is only available on Nerd Bacon proper, so you'll have to be poking around in a draft to get the shortcodes to work. (Unlike this CSS trick, which can be used anywhere as long as that little snippet of CSS I showed you at the beginning is intact.) At some point I might just dig through the contents of the "collapsible content" plugin to get to the core of what makes it work and do my best to implement it elsewhere (namely here in the newsletter).

That's it for this time! Don't forget that all of the CSS you've seen here will work. It has all been added to the site's main CSS file. The classes we've worked with - collapsible, destyle, and restyle - will all work within documents on NB with the same effect they have here. If you encounter any problems or discrepancies, please let me know so that I can do my best to correct them right away.

And if you haven't given it a look already, head over to the next supplement to this issue, 17.2, to see how we're putting these collapsible lists and the menus we discussed back in 1.15.1E to good use by creating all new "nav boxes" for the bottom of articles to help readers get around and find our content better! Please help us with this task as we work on implementing it in the near future!

If I have the time to do so before the next issue of Greased goes out, I may put together a short-ish piece expanding on some of the text effects that we briefly took a look at in a past issue. At the time it was relegated to what I felt comfortable squeezing into the right sidebar of the newsletter, but I'd like to give myself a little more space to show you what's possible and how you might spruce up your own works, particularly if any of you have individual columns and want to put together an attractive hub page. Stay tuned!

NerdBerry
NerdBerry@NerdBacon.com		 The Cubist
TheCubist@NerdBacon.com
Doc Croc
DocCroc@NerdBacon.com
 
Issue #17.1 December 4th, 2015 Volume 1