Ever wanted to put those really great effects on your website, but didn’t know how to start? Yeah, so have we. That’s why we wrote Performer – to take away the pain.
The nitty gritty
Performer does this by allowing developers to use nothing more than CSS classes and standard element attributes (like
href) to trigger these features. Here’s a simple example:
The simple example: Toggler
Let’s say you want to allow users to toggle the visibility of a certain element, like a “Advanced settings” section of a form. Just add a link:
<a href="?view=advanced">View the advanced section of the form</a>
Then make sure your target element has an ID attribute (this one also has a class of ‘note’), and set it to be hidden by default by adding the ‘hider’ class:
<div id="advancedsection" class="note hider"><h2>Advanced Section</h2>...
Then set the link to be a toggler by adding the ‘toggler’ class, and put which element ID to toggle in the
targetEl CSS parameter:
<a href="#" class="toggler targetEl-advancedsection">View the advanced section of the form</a>
Here’s what you get:
This is the advanced section.