Take a look at the mobileThread custom control in teamroom. it does excatly this with an expand / collapse image and panel for every reply to a document.

 

It uses a javascript file to keep a map of all the controls and uses the index of the repeat to determine which one was clicked 

 You can use thisEvent.target to get handle to the button which was clicked, in CSJS. 

 Below is the piece of code which may help you out. 

 

<xp:link escape="true" id="linkShowHide" title="Show Details" text="Show" >

    <xp:eventHandler event="onclick" submit="false">

<xp:this.script>

          <![CDATA[var  nodeDailyRecs  = dojo.byId("#{id:dailyRecspanel}");nodeDailyRecs.style.display= (nodeDailyRecs.style.display == 'none')? "block" : "none"; _this = thisEvent.target;

if(nodeDailyRecs.style.display == 'none'){

_this.setAttribute('title',"Show Daily Hours");

_this.innerHTML = "Show"

}else {

_this.setAttribute('title',"Hide Daily Hours");

_this.innerHTML = "Hide"

}

]]></xp:this.script>

</xp:eventHandler>

</xp:link> 

Yes if CSJS will work for you, you can use the the client side onclick and the through CSJS modify the css attribute "display".

 

eg. domElement.style.display = "none"    /   domElement.style.display = "inline";

Well then the only option i'm aware of is what I did in the mobileThread custom control.

 

I've seen many posts online where other developers have done the same and haven't seen any other solution. There could be a way to cross the CS id with the server side actions such as the executeOnServer method but its going to be a lot more hassle than having a map or vector of the controls