I have (what should be) a rather simple accordion which behaves very strangely. Here is the HTML:
<div class="panel-group" id="accordion" style="width:100%;margin:0 1% 0 1%;padding:0 0 5px 0;text-align:center">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_Why_Body">
<h3 id="Public_Home_Why">
<strong>
{{Landing_Page_Messages.Why_Title}}
</strong>
</h3>
</a>
</h4>
</div>
<div id="Public_Home_Why_Body" class="panel-collapse collapse in">
<div class="panel-body" style=";text-align:justify">
<font size="4">
{{Landing_Page_Messages.Why_Body}}
</font>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_What_Body">
<h3 id="Public_Home_Why">
<strong>
{{Landing_Page_Messages.What_Can_Do_Title}}
</strong>
</h3>
</a>
</h4>
</div>
<div id="Public_Home_What_Body" class="panel-collapse collapse">
<div class="panel-body" style=";text-align:justify">
<font size="4">
{{Landing_Page_Messages.What_Can_Do_Body}}
</font>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="Public_Home_How">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_How_Body">
<h3 id="Public_Home_Why">
<strong>
{{Landing_Page_Messages.How_Does_it_Title}}
</strong>
</h3>
</a>
</h4>
</div>
<div id="Public_Home_How_Body" class="panel-collapse collapse">
<div class="panel-body" style=";text-align:justify">
<font size="4">
{{Landing_Page_Messages.How_Does_it_Body}}
</font>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" id="Public_Home_Your_Role">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_Your_Role_Body">
<h3 id="Public_Home_Your_Role">
<strong>
{{Landing_Page_Messages.Your_Role_Title}}
</strong>
</h3>
</a>
</h4>
</div>
<div id="Public_Home_Your_Role_Body" class="panel-collapse collapse">
<div class="panel-body" style=";text-align:justify">
<font size="4">
{{Landing_Page_Messages.Your_Role_Body}}
</font>
</div>
</div>
</div>
</div>
When the page opens, the first "folder" of the accordion is open (instead of closed). Any panel I click causes the FIRST entry to open and close, but the body of the panel I clicked remains collapsed.
I obviously have a typo but, after re-reading it tens of times, I cannot find it. Where is it?
Found the issue!!!
There was somewhere up in the code another element with the same name as one of the panels of the accordion. Honestly, I found it just by chance(!).
This also explains why the test performed by Skelly and ProgrammerV5 worked (in the piece they checked there was no conflict of names).
Many thanks to those that took the time to test it.