I need some assistance with updating a Bootstrap accordion button behavior. Specifically, I am trying to change it so that when collapsed, it displays the text "See Less -". I believe I should be using the CSS property content, but I'm struggling to pinpoint exactly where to make this adjustment within my HTML code:
<h2>Some Heading</h2>
<div style="display:table; margin:auto;">
<ul style="margin-bottom: 0">
<li class="services-list">Item 1</li>
<li class="services-list">Item 2</li>
<li class="services-list">Item 3</li>
</ul>
</div>
<div id="collapse-custom" class="collapse">
<div class="card card-block">
<div style="display:table; margin:auto; width: 49%;">
<ul>
<li class="services-list">Item 4</li>
<li class="services-list">Item 5</li>
<li class="services-list">Item 6</li>
<li class="services-list">Item 7</li>
<li class="services-list">Item 8</li>
</ul>
</div>
</div>
</div>
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#collapse-custom">See More<i class="fa fa-plus"
style="padding-left: 10px;"></i>
</button>
Any guidance on how to achieve this modification would be greatly appreciated. Thank you in advance!