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

This is the first ‹dt› of the ‹dl class=“expandable”›

This is some text for the first ‹dd›. It is long enough that it should be collapsed with a "more »" showing at the end of the text that is showing and the rest hidden. When the "more »" link is clicked, the remainder of the text should appear with a smooth slide and the "more »" link should change to "« less". It is actually pretty cool, because it is designed to work within an element rather than having to hard code the text to be hidden manually in its own element, such as a ‹div› which would result in a conflagration of content and style.

This is the second ‹dt› of the ‹dl class=“expandable”›

This is a short one. There should be no link or hidden text.

A More Complex Example, with embedded elements

This is the first ‹dt› of the ‹dl class=“expandable”›

This example has embedded a ‹ul› into the next ‹dd›. There is a problem in IE that is being corrected with the innerHTML hack. It occurs when the point of insertion could fall in the middle of a tag, I think. I'll have to check with my brother to see.

This is where there is a problem in IE that is currently being corrected with the innerHTML hack

This ‹dd› has an embedded ‹ul›, as I've mentioned a number of times

• Originally this was problematic

  because the point of insertion of the ‹div› would have fallen in the middle of a tag. However, the textpluslevel function that my brother, Owen, wrote has fixed this issue.
• However, there is still a problem with how this displays in IE. He has written a hack to fix it, but doesn't understand why there was a problem. He thinks it might be linked to jquery itself.
• In IE, the text that is supposed to show is hidden and the remainder is showing and the anchor tag is not even inserted, completely befullding my brother - although he did write the hack, he couldn't figure out the problem
• If someone wants to take a look at it, I can provide more details. Just drop me an email: OriginalMacBabe [at] butididit.com

I embedded the ‹ul› right into the middle of the text of the ‹dd› and it handled it beautifully. It won't matter where in the ‹dd› it is placed. It can be the only text in the ‹dd› if you want.

This is a test paragraph ‹p› embedded in the ‹dd› to show that including HTML within the element is perfectly fine. It is styled pink, bold, and italic with with css attached to the class of the paragraph.

This is a Short One

Not only can the designer set the number of words to show, it can test for orphans. so the effect is not applied where there is only a small amount of text.

Another Embedded Example

Any HTML can be embedded within the content of the element ‹dd›.

• This ‹ul›was emebedded early in the element to see how it would be handled
• This is the second ‹li› It worked correctly, in that the embedded ‹ul› is displaying properly.
• This ‹li› contains a further embedded element, this time a ‹dl›

  This is an embedded ‹dl› Level Three Title One

  This is the text of the first embedded ‹dd›

  This is an embedded ‹dl› Level Three Title Two

  This is the text of the second embedded ‹dd› Even though it is long, it is not being hidden, because it isn't a ‹dd› child of an element with class=class=“expandable”. It should be long enough by now to demonstrate this.

  This is an embedded ‹dl› Level Three Title Three

  This is the text of the third embedded ‹dd›

• This is the last ‹li› in the first embedded list

Another Embedded Example

Any HTML can be embedded within the content of the element ‹dd›. Here I am going to embed another unordered list, but I am going to make sure that it does not occur until after the split would be made in the text. This should be long enought to do it, but I will keep typing a bit just to make sure it does.:

• This ‹ul›was emebedded early in the element to see how it would be handled
• This is the second ‹li› It worked correctly, in that the embedded ‹ul› is displaying properly.
• This ‹li› contains a second embedded ‹ul›
  • This is an embedded ‹ul›
  • This is another list item
  • This is the text of the second embedded ‹li›I am going to just keep typing jibberish here to see how a long sub-element is handled. It will be ignored.
• This is the last ‹li› in the first embedded list

And here is a final paragraph, just to see

Testing a ‹dl› inside the ‹dd›

In this ‹dd› I have embedded a ‹dl› after some text

This is the first ‹dt› in the embedded ‹dl›

I’ve placed this here to test what happens when the selected element contains another element that is the same as itself - will the function be applied here as well? Notice that the effect is NOT being applied to this ‹dl›. Instead, the entire embedded ‹dl› is hidden, because it is the child of the expandable ‹dd›.

This is another title of the embedded ‹dl›

This is the last ‹dd› or the embedded ‹dl›

The ‹dd› following this title, has an embedded ‹dl› that also calls the function - the long ‹dd› within should also be hidden

This ‹dd› will have a ‹dl› contained within that also calls the function. I'm going to write this line long enough to have it hidden before that, though, just to see. In the next one, I'll leave it short. It should work just fine when there is no confusion of inner tags.

This is the first title of the embedded ‹dl› with the class=“expandable”

This is the first ‹dd› of the embedded ‹dl› that has been given the class=“expandable”. It is long enough that the text should be split and some of it should be hidden. Strangely, the function is not being applied, which surprises me. I'm a little confused.

This is the second title

This is short.

This next ‹dd› will embed a ‹dl› early so some of it should show before the hide.

This ‹dd› will embed its ‹dl› early.

This is the first title of the ‹dd› placed early.

This is the text of the ‹dd›. It is long enough that the text should be hidden. I will keep typing jibberish to make sure that it gets that long. Do you think it is long enough yet? I'm pretty sure it is.

This is another title

This is the text.

And it shows an error. When the split is placed in the title, everything is treated as a title? And it got confused about which was the ‹/dd› it was to use for the placement of the ‹/div› because this text that is showing should be hidden

This is the title of a ‹dd› that has a class=“DontHideThis”

This ‹dd› has a class=“DontHideThis” with an embedded ‹dl› that should not be hidden. This class is used when you don't want the function applied.

This is an embedded ‹dl› that should be showing because the parent ‹dd› has a class of "DontHideThis

This is the first

This is another embedded ‹dd› With Lots of Text but class=“DontHideThis”

If you don’t want this to happen, a second class will be required to make sure it is ignored by the script. If any element has a class=“DontHideThis”, the function will not be applied, as I’ve done here. This is the text of the second embedded ‹dd› with a lot of text. I am going to just keep typing jibberish here to see how a long sub-element is handled. It should be ignored, but you never know. It may get picked up anywya, although I strongly doubt it. I think this should be long enough by now to demonstrate itself. Don’t you? Not sure? Ok, let’s type a couple of more words just to be sure.

This is an embedded ‹dl›

This is the last of the first embedded ‹dd›

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] butididit.com to let me know what you think or if I’ve missed something