When using Bootstrap, why are some of my elements randomly not collapsing?

Question

I have several collapsing blocks on my web-forms site. I'm using Bootstrap to collapse them, like so:

<div class="span<%# CurrentBlock.Span > 0 ? CurrentBlock.Span.ToString() : "12" %> info-link-header info-link-header-title expandable-link-heading" data-toggle="collapse" data-target="#<%# ContentId %>" style="position: relative;">
    <!--some content-->
<div class="expandable-container collapse" id="<%# ContentId %>"><!--some more content--></div>

Here's the code-behind for this file:

    protected void Page_Load(object sender, EventArgs e)
    {
        this.DataBind();
        //some other code
    }

Since DataBind() is called, I assume that the <%# ContentId %> code-block should get the correct value. The problem I'm experiencing is that when I click the div I want to expand, the class attribute fails to generate "collapse in"-it just shows "collapse" and so my content is rendered when I inspect it in Chrome Dev tools, but it's not visible. Adding "collapse in" in Chrome Dev tools solves the problem, but of course I need this to happen automatically. What's more confusing is that, when I build this locally, my blocks expand/collapse correctly each time; "collapse in" is added when it needs to be and reverts to "collapse" when it should. When I publish to our dev server, then "collapse in" randomly fails to generate. How can I fix this? Thanks!

Answer 1

I just answered this question. The problem behind this was that my div containing the data-target attribute was using a C# property to get a unique ID value. This value was created by generating the millisecond on DateTime.Now and using that as the value of the id attribute on the collapsing div, and the value of data-target on the top div. On a faster machine than my own, like a dev server, I assume the code ran fast enough to get the same milliseconds value on 2 or 3 divs on the page, which created identical values in id attributes. The identical values in the Id attributes broke the DOM, and hid my content.

Solution: I created a GUID object to populate the 'ContentId' property, which created unique values for the id attribute and kept the DOM intact.