Show and hide div - Prototype with XhochY modification

The goal is to look if the modified Prototype actually works. Let's make an object hide and show on user action.

hide

this is a test object which should hide and show on user action

I created an action link and object on which action will be taken. I gave them ids test_hide and test_hide_button

Prototype accesses the DOM elements using $(id_name) function. Because it is a modification, I have to use $ID(id_name).

Example uses hide() and show() Prototype functions.

<a id='test_hide_button' onclick="showhide('test_hide')">hide</a>
<p id='test_hide'>this is a test object which should hide and show on user action</p>

<script type='text/javascript'>
function showhide( id ) {
  if ($ID(id).hidden) {
    $ID(id).show();
    $ID(id).hidden = false;
    $ID(id + '_button').innerHTML = 'hide';
  } else {
    $ID(id).hide();
    $ID(id).hidden = true;
    $ID(id + '_button').innerHTML = 'show';
  }
}
</script>

Trackback URL for this post:

http://piotr.zalewa.info/trackback/8

Comments

Piotr 1970, January 1 - 00:00

Will do, But I am really thinking of fully replace drupal's jQuery into Prototype. Haven't found anything like this for the moment.

Prem (not verified) 1970, January 1 - 00:00

Thanks for this! I used it with some modifications and it worked well!

Keep posting more of such code!

Thanks! Prem

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Post new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
I just have to ask ...
10 + 6 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.