Showing single element

Click on the image to the left to show it. We target '#avatar' the id of this image and associate a Click event that calls the Show behavior.

Click here to show the avatar.

You can click here to restart the example.

$proto('#avatar', {
  Click: {
    onClick: {
      Show: {} {
    }
  }
});

Hiding multiple elements

My Pix

scratch-1 Show
scratch-2 Show
scratch-3 Show
scratch-4 Show

Here we want to associate a click event with each of the 'Show' links. So we target all the anchor tags that contain the word 'Show' that are inside our my-pix example ('#my-pix a:contains(Show))'.

Then when the onClick event is fired we change the selector to each of the DIVs that contain the image and the anchor link ('#my-pix div'). When you click on a Show link it associates the related DIV and performs the Show behavior on the correct element out of the set of elements.

You can click here to restart the example.

$proto('#avatar', {
  Click: {
    onClick: {
      Show: {} {
    }
  }
});