We have a simple GFX (Gutensite FX) Library that allows you to create simple effects like hiding and revealing content. Or for advanced user you can write your own Javascript on any page, and if you want you can utilize the current version of the Mootools Library that is loaded on your site.

Mootools Library

Advanced users can go to the Advanced tab when editing any page and write their own Javascript and CSS to style and create interactivity on a page. The Mootools library is available when writing any of your javascript and this opens up a great world of possibilities. If you need advanced javascript though, talk to us because we may be able to create a more 'stable' codebase for your site.

Gutensite FX Library

We have a simple Library, based on Mootools, that allows you to add FX to your page by simply specifying a CSS Class for that element. This is somewhat advanced, and will require you to work with the HTML, but for the intrepid it will be worth the effort.

First you have to enable the GFX Library on your site. Go to  your Admin > Site Info page and find the Add-Ons section then enable the GFX Library.

USAGE:

To use the FX, simply place the valid classes on the appropriate HTML elements.

EXAMPLES:

Simple Related Toggles

If you just need one set of toggles on a page (where all the toggles interact with one another) here is the simple method to accomplish that.

These classes would produce this result:

SIMPLE TOGGLE 1

SIMPLE TOGGLE 2

SIMPLE TOGGLE 3

SIMPLE TOGGLE 4

Advanced Multiple Unique Toggles

If you need to different sets of toggles on a page (that don't interact with each other) you can give each set a unique ID so that they only interact with themselves. You'll note that one has the added second unique class of gfxid_mystuff, and the other has the second unique class of gfxid_yourstuff.

These classes would produce this result with two different sets of togglers that don't interact with one another:

MULTIPLE UNIQUE TOGGLE 1.1

MULTIPLE UNIQUE TOGGLE 1.2

MULTIPLE UNIQUE TOGGLE 1.3

MULTIPLE UNIQUE TOGGLE 2.1

MULTIPLE UNIQUE TOGGLE 2.2

FUNCTIONS:

Currently there are only a few simple functions. But we plan to add more as we have time and the need arises.

Accordion

Toggle:

Options: gfx_accordion_toggle, gfxid_*, gfxoptions_{*}

• gfx_accordion_toggle: [REQUIRED]
  Place this on the element that should act as the toggler.
• gfxid_*: [optional]
  If you need multiple sets of accordions on one page you must give them unique ids.
• gfxdisplay_*: [optional]
  By default the accordion will open up the first element in the list. But if you want to specify a different element to open you can add this class with the number of the element to the first toggle, e.g. gfxdisplay_3 will open up the 3rd element. If you want them all closed by default, you can specify "none", e.g. gfxdisplay_none.
• gfxoptions_{*}: [optional]
  If you want to override the default options, you may pass in standard mootools options in JSON format, without any spaces (because the classes are split by a space). This is really only good for very simple option specifications.

Target:

Options: gfx_accordion_target, gfxid_*

• gfx_accordion_target: [REQUIRED]
  Place this on the element (usually a <div>) that surrounds the content that you want to show/hide.
• gfxid_*: [optional]
  If you need multiple sets of accordions on one page you must give them unique ids. This should match the unique gfxid of the toggler.

Reveal

Toggle:

Options: gfx_reveal_toggle, gfxid_*, gfxoptions_{*}

• gfx_reveal_toggle: [REQUIRED]
  Place this on the element that should act as the toggler.
• gfxid_*: [REQUIRED]
  If you need multiple sets of reveals on one page you must give them unique ids.
• gfxoptions_{*}: [optional]
  If you want to override the default options, you may pass in standard mootools options in JSON format, without any spaces (because the classes are split by a space). This is really only good for very simple option specifications.

Target:

Options: gfx_reveal_target, gfxid_*

• gfx_accordion_target: [REQUIRED]
  Place this on the element (usually a <p>) that surrounds the content that you want to show/hide.
• gfxid_*: [REQUIRED]
  If you need multiple sets of accordions on one page you must give them unique ids. This should match the unique gfxid of the toggler.