Hey there, I've implemented the accordion-toggle code below on my visualforce page. Everything is working smoothly with the collapsible toggle, except for one issue. When loading or refreshing the page for the first time, the collapsed panel shows the '-' symbol instead of the expected content '+'. Any ideas on how to fix this?
Visualforce page snippet:
<a href="#" class="accordion-toggle" data-target="#collapse1" data-toggle="collapse"> Data Panel 1 </a>
<div id="collapse1" class="panel-collapse collapse">
<ul style="list-style-type:none">
<li> <a href="#" class="accordion-toggle" data-target="#collapse9" data-toggle="collapse"> Data Panel 2</a>
<div id="collapse9" class="panel-collapse collapse">
<ul style="list-style-type:none">
<li><font style="color:#337ab7"> Description</font></li>
</ul>
</div>
</li>
<li> <a href="#" class="accordion-toggle" data-target="#collapse8" data-toggle="collapse"> Data Panel 3</a>
<div id="collapse8" class="panel-collapse collapse">
<ul style="list-style-type:none">
<li><font style="color:#337ab7"> Node 1</font></li>
<li><font style="color:#337ab7"> Node 2</font></li>
<li><font style="color:#337ab7"> Node 3</font></li>
</ul>
</div>
</li>
</ul>
</div>
CSS Style:
.accordion-toggle:after {
font-family: 'Glyphicons Halflings';
content: "\e082"; <!-- taken from bootstrap.css -->
float: left;
}
.accordion-toggle.collapsed:after {
content: "\e081"; <!-- taken from bootstrap.css -->
}
a {
cursor: pointer;
}