how to change the clicked elements innerHTML in prototype

I have a Html structure like

 <p>
      <a onclick="try {
        toggle_detail(&quot;additional&quot;);
        } catch (e) { alert('RJS error:\n\n' + e.toString()); alert('toggle_detail(\&quot;additional\&quot;);'); throw e }; return false;" href="#">Show 开发者_开发技巧           </a>
 </p>

 <div id="additional">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
 </div>

I am writing a prototype to show the additional div on clicking show and hide on hide.

    $$("."+element_id).each(function(el){
        if(el.visible()){el.hide();

          // el.previous(0).innerHTML="Show";

    }
        else {el.show();
          //    el.previous(0).innerHTML="Hide";
    }
    });

where element_id = "additional"

How to update the innerhtml of the link to show/hide ? I dont know how to update the clicked in link's innerHtml .. Pls give suggestions

Add this to your click handler.

this.innerHTML = (this.innerHTML == 'Show')?'Hide':'Show';

or add the caller as a parameter to your toggle_detail function

toggle_detail(this, "additional");

and change the function to accept that extra parameter

function toggle_detail(clickButton, className){
    // do what you want with clickButton //
}

Also it makes not sense to alter the text inside the each. You should do it only once before or after the each call.

Bonus: Instead of if(el.visible()) el.hide(); else el.show() you can simply use el.toggle().