Expand Ajax-Spoiler effects 1

If you are using prototype.js + effects.js or mootools.js, You can apply some effects anywhere on blog and there is various way to apply them. This is one of them and using javascript functions in Ajax-Spoiler plugin.

This post follows Ajax-Spoiler v0.9

There is some way to apply effects and this post explains one of them.
Check this post also.

1. Base

  • All examples on this post will use ‘Spoiler.Collapse’ effect.
  • Here is a simple example. (Click!)
  • Code for above example is like this:
  • Spoiler.Collapse('id','effect',this) is the point.
  • Element which ‘id’ is ‘mycont’ will be displayed and hid after click again.
  • You can use all effects in Ajax-Spoiler plugin.

2. Apply

  • Let’s apply it to sidebar.
  • General sidebar.php template composed like this(default theme):
  • Let’s apply effect to ‘Categories’. Change

    Categories

    to:

  • Replace
      just below with:

    • Note:: Each elements on page must have it’s own ‘id’.
    • That’s all

    3. More

    • If you want to make specified element hidden first, append class “collapsed” to

      , and style “display:none;” to
        .

      • You can adapt this to anywhere on blog. Let’s apply this to comment list.
      • Open single.php on default theme folder and find and replace it like this:

      • You can use anchor tag(). See this:

      4. Style

      • Edit aj-spoiler.css in aj-spoiler/css foler.

      You can check example for default theme with attached file below.

5 thoughts on “Expand Ajax-Spoiler effects 1”

  1. Any news?

    I also can’t use this technique with the latest version of plugin, please, let us know how soon you are planning to release something to fix it.

    Thank you, plugin is really cool.

    Regards,
    natural

Comments are closed.