Where to start
meta data. Now, you're all set, so let's get started.
Most programming languages have a simple example to get you started, normally called Hello, world!. Performer is no exception, so let's start saying hello. In this example we'll be using the Performer functions
Step 1: Creating the hello
Firstly, create a
p element with the text "Hello, world!" in:
Give it an
id attribute, this is so we can find it with the
<p id="helloworld">Hello, world!</p>
Then give it a CSS class of
<p id="helloworld" class="hider">Hello, world!</p>
Step 2: Creating the toggler link
Now we need a link to toggle the visibility of our lovely message. Create a paragraph with a link in, something like this:
<p><a href="#">Toggle the message</a></p>
I've given this link a
href attribute, but for now let's leave it at that.
Now we want to give it a CSS class of
toggler, that's because we want the link to toggle something:
<p><a href="#" class="toggler">Toggle the message</a></p>
And now we give it another CSS class, this time of 'targetEl-helloworld' - that's the text 'targetEl-' (short for 'target element') then the
id of the element we want to toggle:
<p><a href="#" class="toggler targetEl-helloworld">Toggle the message</a></p>
And that's it! We've used nothing more than standard HTML attributes and CSS classnames and we have a link which toggles the visibility of a hello world message. See the final example here.
Now you've got the general idea, let's take things to the next level and look at Next Steps with Performer.