How To Add a Nice Toggle Function to Reveal More Content

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):

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

2. After that insert my custom code:

<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>

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:

toggle=toggle

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:

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

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

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

Tags: , , , , , , , , , , , , | Posted under CMS Made Simple | RSS 2.0

Author Spotlight

Nic Bug

Nic Bug

I am a freelance web designer from Germany and CMS Made Simple is my every day tool. I have been using it since 2007 and I love it because it’s so easy to use. Even my clients understand and use it daily. I also have my own CMS Made Simple project called www.TemplateMadeSimple.com. There, you will find premium templates for made for CMS Made Simple.

2 Comments on How To Add a Nice Toggle Function to Reveal More Content

  1. Jan says:

    Hi,

    I tried to use the CSS with TinyMCE but that does not make the toggle-text gray, is this possible?

    The script is great!

    Kind regards,
    Jan

    • Nic Bug Nic Bug says:

      it should work in tinymce too! check tinymce settings -> advanced -> “Load stylesheet for content (recommended):” -> checked
      TinyMCE manipulates the stylesheets. So it might help if you paste the css code not at the end of your stylesheet but at the beginning or the middle. I’ve tested it and it works for sure!

Leave a Reply

Your email address will not be published. Required fields are marked *


9 + = 13

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>