On click function of Prototype Javascript

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 cl开发者_开发知识库ass="family-name">          </span>
         </span>
         <span class="email">email@gmail.com</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

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.