Dynamic Bootstrap Accordian loads in show - asp.net

Question

I have a bootstrap accordion that is generated dynamically from code behind. It is loaded during page_init. Everything works except they are all set to open ('show') not closed ('hide').
If I take the generated markup and run it, it works fine so the html is OK. Any ideas?
Thanks
============== EDIT ============
This script resolves the problem
Private Sub SectionClose()
Try
Dim SB As New StringBuilder
SB.Append("$(document).ready(function(){")
SB.Append(" $('#accordion').accordion({ collapsible: true, active: false }); ")
SB.Append("$('.selector').accordion(); ")
SB.Append("}); ")
ScriptManager.RegisterStartupScript(Me, Me.GetType(), "ShowCollapse", SB.ToString, True)
Catch ex As Exception
Dim vError As New SendError
vError.MailError("214", PageName, ex)
End Try
End Sub
and it now works perfectly, but throws a Object doesn't support property or method 'accordion'
This is what the generated markup looks like
<div class="panel panel-default">
<div class="panel-heading">Current Board Members</div>
<!-- Start of Dynamic elements -->
<div id="MainContent_ContactBoardMembers" class="panel-body">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse_1">John Doe - Treasurer</a></h4>
</div>
<div id="collapse_1" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse_2">John Smith - President</a></h4>
</div>
<div id="collapse_2" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse_3">Bill Mathews - Director at large</a></h4>
</div>
<div id="collapse_3" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
<!-- End of Dynamic elements -->
</div>
Edit - added to show how to create accordion from code behind
Dim i As Integer = 0
For Each Row As DataRow In DT.Rows
i = Row("Member_ID")
Dim MemberName As String = ""
MemberName += vFunction.ReturnText(Row("First_Name"))
MemberName += " " & vFunction.ReturnText(Row("Surname"))
MemberName += " - " & vFunction.ReturnText(Row("Position"))
Dim PanelHeading As New HtmlGenericControl("div")
With PanelHeading
.Attributes.Add("class", "panel-heading")
End With
Dim H4 As New HtmlGenericControl("h4")
With H4
.Attributes.Add("class", "panel-title")
End With
PanelHeading.Controls.Add(H4)
Dim aData As New HtmlGenericControl("a")
With aData
.Attributes.Add("class", "accordion-toggle collapsed")
.Attributes.Add("data-toggle", "collapse")
.Attributes.Add("data-parent", "#accordion")
.Attributes.Add("href", "#collapse_" & i)
' .Attributes.Add("data-target", "#collapse_" & i)
.InnerHtml = MemberName
End With
H4.Controls.Add(aData)

Answer 1

I noticed that the 'solution' (adding the script) didn't help and when I added jquery.ui to the page (for some reason it wasn't working in the bundle) the error went, but the issue was still there - I did notice that every time there was a javascript error the accordion worked, so I disabled one script at a time in the masterpage.
The NavBar is built dynamically and a script is loaded to change #media according to how large it is - once I changed .collapse to .navbar-collapse everything worked :-)