bootstrap accordion are not working inside repeater when using Master Pages

Question

I am facing an issue with the bootstrap accordion control. I have kept a bootstrap accordion control inside a repeater. Inside the bootstrap accordion, there are bootstrap Tab panels. When I tested it in a simple web-form, it was working perfectly, but when I used it in a content page which is nested within a master page, it is not working.

The issue is that, I am assigning href property of an anchor tag as "#controlid" which is an id of div in the same page. But when the page is rendered, "../" is added to the prefix of the href value. So, when I check the html page source, it's like "../#controlid".

So, when I click on accordion anchor tag, it redirects to home page, instead of expanding.

Answer 1

You can use Container.ItemIndex.

href="#collapse<%# Container.ItemIndex %>"

and

<div id="collapse<%# Container.ItemIndex %>" class="panel-collapse collapse in">