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:
    Click!)
    
  • 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:

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

        .

        Categories

  • You can use anchor tag(). See this:
    Comment List	
    
  • 4. Style

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

    download default-example.zip(5.1 KB)

    5 responses to “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