On click function of Prototype Javascript

Question

HI ,

I am using Prototype Javascript for my application . I am having a Html like

     <span style="display: none;">
         <span class="fn">
            <span class="given-name">NAME</span>
            <span class="family-name">          </span>
         </span>
         <span class="email">[email protected]</span>
       <span class="tel"></span>
       <span class="role">Developer</span>
       <a class="underlin" href="/users/username">View</a> 
       <a class="additional_click" href="">Show Additional Details</a>
       <span style="display: none;" class="additional_detail"> 
            Personal Number : 82374894725
       </span>

     </span>

I am trying a task of when clicking on Show Additional details the span next to that should be displayed and the Innerhtml should be replaced with Hide Additional Details .

And on clicking Hide additional Details , the span (additional_detail) should hide

     I have written a Javascript (Prototype) for this

       $$(".additional_click").each(function(el){
        el.observe("click", function(event) {
         event.element().next().show();
       el.replace("Hide additional details");

        });
    });

How to write the Js for on clicking Hide Additional Details to get the span to hide. And to replace the text to Show additional details

Frode · Accepted Answer · 2010-11-18 10:53:10Z

3

In your event function, check if the span was visible. If it was, then hide it and change the text to "Show additional details", and if it wasn't, then show it and change the text to "Hide additional details".

$$(".additional_click").each(function(el) {
    el.observe("click", function(event) {
        if(el.next().visible())
        {
            el.next().hide();
            el.innerHTML = "Show additional details";
        }
        else
        {
            el.innerHTML = "Hide additional details";
            el.next().show();
        }
        Event.stop(event);
    });
});

Also remember to stop the event, so that the browser doesn't actually follow the link.

answered Nov 18, 2010 at 10:53

Frode

5,7102 gold badges27 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

On click function of Prototype Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related