Переключить знаки плюс и минус в заголовке карты BS 4.x

Question

Я пытаюсь выучить Bootstrap.У меня есть код, указанный ниже.Проблемы:

1-Когда карта развернута, я хотел, чтобы знак плюс изменился на знак минус, но этого не происходит.Как это исправить?Я не хочу использовать отдельную функцию js в конце тела.

2 - При использовании приведенного ниже кода появляется нечетный квадрат, когда вместо fa вместо "fa" используется квадрат, квадрат исчезает.Я предполагаю, что 'fas' для бесплатного набора, и так как у меня не было подписки, то это привело к появлению квадрата.Это правильно?

onclick="$('#collapseOne').toggleClass('fa-fa-minus-square fa-plus-square')"

jsfiddle, содержащий код: Код проблемы

Спасибо всемза вашу помощь.

Answer 1

У вас есть несколько небольших ошибок / опечаток, в строке 9 в HTML id = "# collapseOne" это должен быть id = "collapseOne", а не хорошие классы Font awesome имен классов в строке 8 в HTML.

<div class="container">
   <div id="accordion" class="accordion">
      <div class="card mb-0">
         <div class="card-header collapsed" data-toggle="collapse" href="#collapseOne">
            <a class="card-title"
               onclick="$('#collapseOneSquare').toggleClass('fas fa fa-minus-square fas fa fa-plus-square')">
            	<i class="fas fa fa-plus-square fa-pull-right p-1" id="collapseOneSquare"></i>
            		Card Header Text
            </a>
         </div>
         <div id="collapseOne" class="card-body collapse" data-parent="#accordion" >
            <p>XXXXXXXXX Contents XXXXXXXXXX</p>
         </div>
      </div>
   </div>
</div>