CMS module Content Toggle (expand/collapse)

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.

Download here!

How install it?

1) Extract all files in respective directories (lib/toggle/... plugins/... )

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)

Goto admin / Extentsions /TinyMce WYSIWYG
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"} HTML code like pictures, text, ... <h3>Need a Website?</h3> <p> ... www.web2do.be ...</p> {toggle_end} (This 'll show contentoggle window, expanded and 700 width)

Change the looks

For personal changes you can edit the top bar (< your cms root >/lib/toggle/trigger.gif) like this example:

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.

23 Responses to “Showtime Module 2.0.2”

Good modulesAuthor Name: gilgabCreated: 25 Apr 2012
Hello Peter,
Good job, this module work fine
Thanks

Best regards
DebbieAuthor Name: DebbieCreated: 28 Apr 2012
That's really thinking at an ipmressvie level
Nice pluginAuthor Name: FranckCreated: 18 Jul 2012
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?
Problem with barAuthor Name: HansCreated: 24 Jul 2012
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
Reply: Problem with barAuthor Name: PeterCreated: 8 Aug 2012
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
IE issueAuthor Name: DmytroCreated: 12 Sep 2012
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?
Two toggle.Author Name: pabelCreated: 11 Dec 2012
Can I run on a subpage two independent modules? Separately expand/collapse
In IE it drops down and jumps upAuthor Name: FarCreated: 15 Jan 2013
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
To fix IEAuthor Name: Wiert OmtaCreated: 18 Jan 2013
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
RE: To fix IEAuthor Name: FarCreated: 20 Jan 2013
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
Problem with markupAuthor Name: ChrisCreated: 21 Jan 2013
Thank You for this - i like it.
I found two mistakes in html (function.toggle_start.php), so the code isn't valid.

should be
'....'

Stylesheet is not allowed in content, couldn't fix that. Can You help?
New version 2.0 available nowAuthor Name: PeterCreated: 22 Jan 2013
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!
The new version (2.0) does not display imagesAuthor Name: FarCreated: 22 Jan 2013
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
ChrisAuthor Name: ChrisCreated: 22 Jan 2013
Hello Peter, thank you for this release. One mistake left - no script type defined in function_toggle_start.php
close it with...Author Name: shiningCreated: 20 Feb 2013
i found a typo during implementation. it should be
"close it with {toggle_end}"
Mission files/optionAuthor Name: RichardCreated: 20 Mar 2013
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:"
Nor Advanced optionAuthor Name: RichardCreated: 20 Mar 2013
In my CMS Made Simple there is no tab Advanced under
Goto admin / Extentsions /TinyMce WYSIWYG
Reply: Mission files/optionAuthor Name: PeterCreated: 21 Mar 2013
Hi Richard,
For this you'll need to install TinyMCE module.
Download and install from this link.
A little bugsAuthor Name: AlexCreated: 28 Mar 2013
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.
Three-show banner all use same picsAuthor Name: Ralph OlanderCreated: 15 Jul 2013
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?
Works like a charmAuthor Name: Doug JCreated: 16 Jul 2013
Been looking for something like this for a while. Clean, efficient and works exactly as it should. Thanks for this!!
Nice Author Name: JoostCreated: 23 Jan 2014
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
Keep multiple block activeAuthor Name: Joost Created: 23 Jan 2014
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.