Kentico's webpart control ID in value in a repeater and transformation - twitter-bootstrap-3

Question

I'm building out a bootstrap based accordion. It's almost there, except i need to wrap each accordion with a tab with a unique ID. My thought was to use the repeaters control ID. So how i can access this from a transformation, and also the HTML envelope?
Here is the HTML envelope from the repeater
<div class="accordion" id="askUsAccordion">
</div>
Here is my transformation code
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<%# DataItemIndex + 1 %> <%# Eval("Heading") %>
</h4>
</div>
<div id="accordionPanel<%# DataItemIndex + 1 %>" class="panel-collaspe collapse" role="tabpanel" aria-labeledby="panel<%# DataItemIndex + 1 %>">
<div class="panel-body">
<%# Eval("Panel") %>
</div>
</div>
</div>

Answer 1

Why not just use the Repeater's ClientID?
Try <%# Container.ClientID %> in this case Container should reference the Repeater the transformation is running on.

Answer 2

Mark, not sure this is the best solution, but it should work for you. Add server side function into your transformation like this:
<script runat="server">
protected string GetID()
{
Control parent = this;
while ( (!(parent is CMSWebParts_Viewers_Documents_cmsrepeater)) &&
(parent != null))
{
parent = parent.Parent;
}
return (parent as CMSWebParts_Viewers_Documents_cmsrepeater).WebPartID;
}
</script>
And call this method in your transformation like this:
<%# GetID() %>

Answer 3

While this isn't my preferred method, i wrote a quick js snippet. I try to avoid having too much JS.
/* Accordions */
// we first detect if there is an accordion in the DOM, and if see we ensure that each is with it's own names space
if ($accordion.length){
// we need the ID of each accordion on the page which then becomes the data-parent value, which is needed to ensure we can isolate accordions
$accordion.each(function(i,v){
var $this = $(this),
$id = $this.attr('id');
// loop through each accordion panel
$this.children('.panel').each(function(){
var $that = $(this);
$('.panel-title-link', $that).attr('data-parent', $id);
});
});
}