One of my clients needed a convenient solution to apply collapsible content. So came up with a neat idea. You can see it in action here.
It is very easy to implement.

1. Add jQuery Javascript library at least from Google code in your page template (before tag):

[html]<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>[/html]

2. After that insert my custom code:

[js]<script type="text/javascript">{literal}
$(function(){
$(".toggle").hide().after("<a href=’#’ class=’showtoggle’>show more</a>");
$(".showtoggle").toggle(
function(e){
e.preventDefault()
$(this).prev().slideDown();
$(this).text("hide");
},
function(e){
e.preventDefault()
$(this).prev().slideUp();
$(this).text("show more");
}
);
});
{/literal}</script>[/js]

3. Now we need to add the toggle class to our editor. In CMSMS 1.10+ we do that in MicroTiny settings. There is a text area for CSS-Styles. Add this line:

[php]toggle=toggle[/php]

4. If you go to a content page, you will see the dropdown menu in editor toolbar. From here you can now select the new class. Simply select your collapsible content first and then apply our new class.

5. That’s it. To see changes in the Editor I added css-styles in my page stylesheet just for that “behind the scenes” view:

[css]
.CMSMSBody .toggle {
border:1px dotted #ccc;
color:#999;
margin:5px 0 10px 0;
padding:5px;}
[/css]

These styles will only apply in backend editor.
Final result:

Looking for quality CMS Made Simple Hosting? Look no further than Arvixe Web Hosting!