Hiding single element

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

You can click here to restart the example.

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

Hiding multiple elements

My Pix

scratch-1 Hide
scratch-2 Hide
scratch-3 Hide
scratch-4 Hide

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

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 Hide link it associates the related DIV and performs the Hide behavior on the correct element out of the set of elements.

You can click here to restart the example.

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