As of Saturday, January 8, this pretty much works as it should. I don’t quite understand it all yet, so you will have to wait for a full explanation.

My Concession to Browser Incompatibility

After fighting for long enough, I realized that my ideal of creating an entirely css based layout is limited. Even though I had css that simulated a beautiful tabbed subpage (as seen in my galleries: Gallery) the browser differences made consistent rendering ridiculously difficult when compared to the simplicity of something like jQuery and the hideAllExcept.js plug-in, which does the exact same thing in a couple of lines of code and degrades beautifully. i have modified it to my purposes elsewhere, but that is not the point of this.

Why I Created This

As I designed my latest site, I found it was incredibly text heavy ... never a good thing. I thought that using a technique similar to that seen in News feeds (and other places) where a summary of the content is provided with a link to get the full text, would be a good solution. Having found jQuery (really nice, really simple), there were a ton of examples of hiding/showing text in elements. None, however, allowed for a portion of the text to show ... they all used entire elements. You would think that would be enough for me .. nice and simple, particularly applicable to elements like the ‹dl› .. but NO, I wanted MORE! Thus, the script applied on this page (for now titled: MoreLessSummary.js).

Since the function adds the ‹div› to surround the text to be hidden, there is no conflagration of content and style, and it degrades beautifully - since nothing happens if there is no js. In fact, it was created so that the web administrator is not required to place any extraneous code into the document; the HTML requied to achieve the effect is all inserted by the script. It was even designed to ignore multiple spaces when dividing the content into the array of words ~ so extra spaces and line returns will be ignored, making data entry much easier.

I designed the function to work on ‹dl›, since this element makes most sense to use for Calatalogues and FAQ, but it can actually be applied to any element or group of elements or any other selector you choose.

It has also been designed to check for a secondary class (class=“DontHideThis”) before applying the function. If this secondary class is not present, the funciton is applied.

A ‹div› is used instead of a ‹span› to make sure there is no syntax violation when embedded block level elements appear within the text that is to be hidden. This means that the hidden text will begin on a new line when the toggle to show it is clicked.

Since I am not an expert programmer, I enlisted the assistance of my brother, who is. He wrote a new function for jquery called textpluslevel that will parse the text and split it into an array of words, but isolate embedded element tags so they don't get split.

The amount of text that is shown before the "more »" link can be set by the designer, although It isn’t perfect since it is measured in "words" ~ long words or short words make no difference; it is a "best guestimate". Nonetheless, it is a pretty good result. It can also be modified to include a "Show All" and "Hide All" link.

The text that is used in the added link can also be determined by the site builder.

An example of MoreLessSummary.js applied to a ‹dl›:

Here are a number of examples of the function applied in different ways in order to test it as fully as possible. If I have missed an example, please let me know so I can add it. I have only used ‹dl› for simplicity, but, as already mentioned, any selector can be used.

A Simple ‹dl› with long and short ‹dd› ann no embedded elements

A More Complex Example, with embedded elements

Other Considerations

A "Show All" and "Hide All" link can also be included quite easily in the page.

Cool Eh?

Please contact me: OriginalMacBabe [at] to let me know what you think or if I’ve missed something

© 2007 EGL created on a Mac