MoreLessTextComponent Class

ViewComponent to section text into a lede that is always display, with the remainder in a hidden block which is revealed by clicking a link.

[ViewComponentDetails("MoreLessText", Sections = "")]
public class MoreLessTextComponent

Remarks

The component uses methods from the prototype.js javascript library which it automatically loads, and adds it's own javascript method, using the JavascriptComponent. It requires that the InsertJavascriptComponent be included in the HEAD section of the HTML page (probably best placed in the layout).

The Html generated has the following features:

• Full HTML formating available to all portions of the text.
• Full text available in the body of the page (not just in a tooltip)
• Full text visible when Javascript unavailable/disabled.
• Minimal disurption when CSS unavailable/disabled.

Example

Given the following code:

#set ($text="Congress shall make no law respecting [abbeviated for length] for a redress of grievances.")

#component (MoreLessText with "Text=$text" "MaxLength=100")

Would generate code similar to this

Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise 
<span id="extraText:2548fd60"> thereof; or abridging the freedom of speech, or of the press; or the right of the people
peaceably to assemble, and to petition the Government for a redress of grievances.
<a href="#" onclick="moreless('2548fd60');">(less)</a></span>
<span id="more:2548fd60" style="display:none">
<a href="#" onclick="moreless('2548fd60');">(more)</a>
</span>
<script type="text/javascript">moreless('2548fd60');</script>

Initially, the display text will look like this:

Clicking the (more) link will transform it into:

Clicking the (less) link will restore it to the original.