Content toggle plugin 1.3
What does this do?
It creates a div ("block") witch can collapse and expand by pressing the bar, it uses JQuery.
How install it?
After refresh, Extensions>Tags will list a "toggle_end" tag and "toggle_start".
Now the plugin is installed.
2) Load Jquery
Make sure jQuery library is loaded by inserting this script. Make sure you enter this code between your section of your pagetemplate.
(Not needed if you already have Jquery installed)
you can use this:
<script type="text/javascript" src="lib/toggle/jquery.js"></script>
</head>
Or use jQuery script from Google:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Edit TinyMCE settings for easy use. (optional)
open tab Advanced, scroll down and edit "Custom dropdown:"
add this code or change original: ---|---
Start expand/collapse-area|{toggle_start title=\'This is my expandable area\'}
End expand/collapse-area|{toggle_end}
---|---
and save
now you can use the icon "Specific Dropdown-menu" in TinyMCE menubar.
How do I use it?
Just insert the tag into your content or template like:
{toggle_start title="text line for the top bar"}
and close it with {toggle_end}
For example:
{literal}
{toggle_start title="Web Design & Development" width="700" status="active"}
(This 'll show contentoggle window, expanded and 700 width)
HTML code like pictures, text, ...
<h3>Need a Website?</h3>
<p> ... www.web2do.be ...</p>
{toggle_end}
Change the looks

You can also adjust the looks by adjusting the CSS file : (< your cms root >/lib/toggle/stylesheet.php)
Parameters
- (optional) title="some text here" - Display title in bar.
- (optional) status="active" - This 'll show the content, if omitted the content 'll be collapsed by default.
(optional) width="700" - Controls the width of your content.
if not set then default width = 625px;
Warning: when using multiple content toggle windows it only needs to be set in the first toggle definition. Else this settings won't work.
Leave your reply here.
Hello Peter,
Good job, this module work fine
Thanks
Best regards
That's really thinking at an ipmressvie level
Hi Peter,
nice work, as usual. ;-)
I have an incompatibility with the MleCMS module though, because both use the "active" class to modify the display. Any tip?
Hi,
Great module. Got it working, but I have a small problem.
The text I use for the "headers" is shown as plain text. These texts are clickable, and the animation is there, but I see no nice box around these texts. I tried changing stylesheet.php, but none of the changes appear on the site. I'm using CMSMS 1.10.3.
Any suggestions ?
Thanks,
Hans
Hi Hans,
Make sure you did install the plugin properly.
And see if all files are installed.
- lib
- - toggle
- - - stylesheet.php
- - - toggle_block_btm.gif
- - - toggle_block_strech.gif
- - - trigger.gif
- plugins
- - function.toggle_end.php
- - function.toggle_end.php
Hi guys,
In IE it drops down and jumps up. Is anyone has the same issue? I tried both scripts and still getting the same result. Any advise?
Can I run on a subpage two independent modules? Separately expand/collapse
Dear Peter,
Thank you for "Content toggle plugin".
I have installed 1.4 version and in IE it drops down and jumps up.
Seems that other people have had the same problem.
Did you have some suggestions to solve the problem?
Thank you
Far
Hi,
To fix the IE bug you have to remove the jQuery loading part.
Well, at least it fixed the problem in my case.
So go to function.toggle_start.php and remove these parts:
/******** Load jQuery if not present *********/
(...)
function main() {
and this part:
} //function.main
Make sure you load jQuery in the head of your page, but that is likely to be the case since that causes the problem.
X
Hi Wiert Omta,
Thank you very much.
I found another solution. Since in the header, I'm using the version 1.8.3 of jQuery, in function.toggle_start.php I have only changed the version of jQuery to 1.8.3 and I solved the problem:
/******** Load jQuery if not present *********/
if (typeof jQuery === "undefined" || jQuery.fn.jquery !== \'1.8.3\')
Thank you
Far
Thank You for this - i like it.
I found two mistakes in html (function.toggle_start.php), so the code isn't valid.
Stylesheet is not allowed in content, couldn't fix that. Can You help?
Release notes :
- Removed autoload function for JQuery, because of bugg in IE
- Removed auto CSS loading (was not Markup valid)
- Updated help file and CSS script
- plugin is now Markup valid!
Hi Peter,
The new version (2.0) does not display images (toggle_block_btm.gif, toggle_block_stretch.gif, trigger.gif). Is seen only the text.
Thank you
Hello Peter, thank you for this release. One mistake left - no script type defined in function_toggle_start.php
i found a typo during implementation. it should be
"close it with {toggle_end}"
I just downloaded it but in the zip file there are no files stylesheet.php and jquery.js
I do not have this option in CMS Made Simple™ 1.11.4 “Fernandina”:
Goto admin / Extentsions /TinyMce WYSIWYG
open tab Advanced, scroll down and edit "Custom dropdown:"
In my CMS Made Simple there is no tab Advanced under
Goto admin / Extentsions /TinyMce WYSIWYG
Hi Richard,
For this you'll need to install TinyMCE module.
Download and install from this link.
Hello
If your TinyMCE crack the page and show something like:
Oops!
Sorry, it looks like something went wrong and an error has occurred.
Don’t worry, it can happen to any of us.
Error:
...smarty_internal_templatecompilerbase.php:
In the Advanced tab in TinyMCE change the close tag:
{toggle_close}
for this:
{toggle_end}
At least, in my case works.
Liked the demo of 3 shows in a "banner" row and I added three discrete sets of pics (one for each show, that is) but the three shows all draw from the totality of of all photos. Is there a way to make it so each show only uses the pics assigned to that one and not the others?
Been looking for something like this for a while. Clean, efficient and works exactly as it should. Thanks for this!!
Hi!
I used this feature several times and I really like. Now I need some help .
Is it possible to have several block "active" at the same time? Now, when you press a bar to open one, the other closes automaticly.
I managed to do this once, but then the "+" and "-" did not work anymore and I forgot how i did that...
Thnx guys
I found out:
replace this:
if ($(this).hasClass("active")){
$(this).removeClass("active");
}else{
//toggle all other open containers first
$(".active").next(".toggle_container").slideToggle("slow,");
$(".active").removeClass("active");
$(this).addClass("active");
}
With this:
if ($(this).hasClass("active")){
$(this).removeClass("active");
}else{
$(this).addClass("active");
}
To keep blocks open when clicking another block.
Cup of coffee
If you like this module, feel free to buy me a cup of coffee.
The best CMS (Contentmanagementsysteem)