How to change the accordion menu icon with JS?

I have a menu (accordion) that uses Bootstrap 3.3.7 and Font Awesome 5.0.1

What I am looking for :

When the menu is closed, a “plus” icon is displayed.

When the menu is open, a “minus” icon is displayed.

The “plus” icon is displayed on the menu but does not change.

I think there is a problem with my JS code.

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading panel-like">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false">
        <h4 class="panel-title">
        <svg class="svg-inline--fa fa-heart fa-w-18 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M414.9 24C361.8 24 312 65.7 288 89.3 264 65.7 214.2 24 161.1 24 70.3 24 16 76.9 16 165.5c0 72.6 66.8 133.3 69.2 135.4l187 180.8c8.8 8.5 22.8 8.5 31.6 0l186.7-180.2c2.7-2.7 69.5-63.5 69.5-136C560 76.9 505.7 24 414.9 24z"></path></svg><!-- <i class="fas fa-heart fa-lg"></i> --> Ses pages préférées <span class="badge">0</span>
        <span class="collapse-change-icon"><svg class="svg-inline--fa fa-plus-circle fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="plus-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg><!-- <i class="fas fa-plus-circle fa-lg"></i> --></span>
        </h4>
      </a>
    </div>
    <div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
      <div class="panel-body">
        <div class="panel-help">
          L'utilisateur peut montrer ou cacher ce qu'il aime.<br>
          Les badges verts affichent le nombre total de j'aime (même les cachés).<br>
          Les résultats affichent uniquement ce que l'utilisateur souhaite montrer.
        </div>
      </div>
      <div class="panel-body"><dd><div class="views-element-container form-group"><div class="view view-profile-page-like view-id-profile_page_like view-display-id-block_1 js-view-dom-id-9c91349966910a86b1ba6a9c66ae52b7b92568e7856bfc40d447149fed9dc49f">


      <div class="view-header">
      Résultat trouvé 0
    </div>

      <div class="view-empty">
      <p>Cet utilisateur n'a mis aucune mention j'aime.</p>

    </div>



          </div>
</div>
</dd></div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading panel-contest">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false">
        <h4 class="panel-title">
        <svg class="svg-inline--fa fa-trophy fa-w-18 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="trophy" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 35.7 22.5 72.4 61.9 100.7 31.5 22.7 69.8 37.1 110 41.7C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6c40.3-4.6 78.6-19 110-41.7 39.3-28.3 61.9-65 61.9-100.7V88c0-13.3-10.7-24-24-24zM99.3 192.8C74.9 175.2 64 155.6 64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-15.1-5.2-29.2-12.4-41.7-21.4zM512 144c0 16.1-17.7 36.1-35.3 48.8-12.5 9-26.7 16.2-41.8 21.4 7-25 11.8-53.6 12.8-86.2H512v16z"></path></svg><!-- <i class="fas fa-trophy fa-lg"></i> --> Les concours remportés <span class="badge">0</span>
        <span class="collapse-change-icon"><svg class="svg-inline--fa fa-plus-circle fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="plus-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg><!-- <i class="fas fa-plus-circle fa-lg"></i> --></span>
        </h4>
      </a>
    </div>
    <div id="collapse2" class="panel-collapse collapse" aria-expanded="false">
      <div class="panel-body"><dd><div class="views-element-container form-group"><div class="view view-profil-page-concours view-id-profil_page_concours view-display-id-block_1 js-view-dom-id-c93650dc04dbe389c2eebfbc710083ad849dc98a77b48f8161cbae68609b76fa">


      <div class="view-header">
      Résultat trouvé 0
    </div>

      <div class="view-empty">
      <p>Cet utilisateur n'a remporté aucun concours.</p>

    </div>



          </div>
</div>
</dd></div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <a class="" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="true">
        <h4 class="panel-title">
        <svg class="svg-inline--fa fa-object-group fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="object-group" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M480 128V96h20c6.627 0 12-5.373 12-12V44c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v20H64V44c0-6.627-5.373-12-12-12H12C5.373 32 0 37.373 0 44v40c0 6.627 5.373 12 12 12h20v320H12c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-20h384v20c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20V128zM96 276V140c0-6.627 5.373-12 12-12h168c6.627 0 12 5.373 12 12v136c0 6.627-5.373 12-12 12H108c-6.627 0-12-5.373-12-12zm320 96c0 6.627-5.373 12-12 12H236c-6.627 0-12-5.373-12-12v-52h72c13.255 0 24-10.745 24-24v-72h84c6.627 0 12 5.373 12 12v136z"></path></svg><!-- <i class="fas fa-object-group fa-lg"></i> --> Ses contenus <span class="badge">0</span>
        <span class="collapse-change-icon"><svg class="svg-inline--fa fa-plus-circle fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="plus-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg><!-- <i class="fas fa-plus-circle fa-lg"></i> --></span>
        </h4>
      </a>
    </div>
    <div id="collapse3" class="panel-collapse collapse in" aria-expanded="true" style="">
      <div class="panel-body"><dd><div class="views-element-container form-group"><div class="view view-profil-page-contenu view-id-profil_page_contenu view-display-id-block_1 js-view-dom-id-5046ef4a9eab21dfa4bd430068e0d74db0486d12515e1007257e88d26ed3b55b">


      <div class="view-header">
      Résultat trouvé 0
    </div>

      <div class="view-empty">
      <p>Select any filter and click on Apply to see results</p>

    </div>



          </div>
</div>
</dd></div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false">
        <h4 class="panel-title">
        <svg class="svg-inline--fa fa-gift fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="gift" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M488 192h-64.512C438.72 175.003 448 152.566 448 128c0-52.935-43.065-96-96-96-41.997 0-68.742 20.693-95.992 54.15C226.671 50.192 199.613 32 160 32c-52.935 0-96 43.065-96 96 0 24.566 9.28 47.003 24.512 64H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h8v112c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V320h8c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zm-208-32c24-56 55.324-64 72-64 17.645 0 32 14.355 32 32s-14.355 32-32 32h-72zM160 96c16.676 0 48 8 72 64h-72c-17.645 0-32-14.355-32-32s14.355-32 32-32zm48 128h96v184c0 13.255-10.745 24-24 24h-48c-13.255 0-24-10.745-24-24V224z"></path></svg><!-- <i class="fas fa-gift fa-lg"></i> --> Ses produits <span class="badge">0</span>
        <span class="collapse-change-icon"><svg class="svg-inline--fa fa-plus-circle fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="plus-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg><!-- <i class="fas fa-plus-circle fa-lg"></i> --></span>
        </h4>
      </a>
    </div>
    <div id="collapse4" class="panel-collapse collapse" aria-expanded="false">
      <div class="panel-body"><dd><div class="views-element-container form-group"><div class="view view-profil-page-produit view-id-profil_page_produit view-display-id-block_1 js-view-dom-id-769f9d711f4e8bc30f68415fc4e177720959cfa4d0d5f65a817079d4cb41eb47">


      <div class="view-header">
      Résultat trouvé 0
    </div>

      <div class="view-empty">
      <p>Aucun produit n'a était publié.</p>

    </div>



          </div>
</div>
</dd></div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="false">
        <h4 class="panel-title">
        <svg class="svg-inline--fa fa-users fa-w-20 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="users" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg=""><path fill="currentColor" d="M320 64c57.99 0 105 47.01 105 105s-47.01 105-105 105-105-47.01-105-105S262.01 64 320 64zm113.463 217.366l-39.982-9.996c-49.168 35.365-108.766 27.473-146.961 0l-39.982 9.996C174.485 289.379 152 318.177 152 351.216V412c0 19.882 16.118 36 36 36h264c19.882 0 36-16.118 36-36v-60.784c0-33.039-22.485-61.837-54.537-69.85zM528 300c38.66 0 70-31.34 70-70s-31.34-70-70-70-70 31.34-70 70 31.34 70 70 70zm-416 0c38.66 0 70-31.34 70-70s-31.34-70-70-70-70 31.34-70 70 31.34 70 70 70zm24 112v-60.784c0-16.551 4.593-32.204 12.703-45.599-29.988 14.72-63.336 8.708-85.69-7.37l-26.655 6.664C14.99 310.252 0 329.452 0 351.477V392c0 13.255 10.745 24 24 24h112.169a52.417 52.417 0 0 1-.169-4zm467.642-107.09l-26.655-6.664c-27.925 20.086-60.89 19.233-85.786 7.218C499.369 318.893 504 334.601 504 351.216V412c0 1.347-.068 2.678-.169 4H616c13.255 0 24-10.745 24-24v-40.523c0-22.025-14.99-41.225-36.358-46.567z"></path></svg><!-- <i class="fas fa-users fa-lg"></i> --> Ses groupes <span class="badge">0</span>
        <span class="collapse-change-icon"><svg class="svg-inline--fa fa-plus-circle fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="plus-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg><!-- <i class="fas fa-plus-circle fa-lg"></i> --></span>
        </h4>
      </a>
    </div>
    <div id="collapse5" class="panel-collapse collapse" aria-expanded="false">
      <div class="panel-body"><dd><div class="views-element-container form-group"><div class="view view-profil-page-groupe view-id-profil_page_groupe view-display-id-block_1 js-view-dom-id-2e32ce43b15b99287bc35ff057edd6a6016a6e24603ee3f32329be118964bc97">


      <div class="view-header">
      Résultat trouvé 0
    </div>

      <div class="view-empty">
      <p>Select any filter and click on Apply to see results</p>

    </div>



          </div>
</div>
</dd></div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse6" aria-expanded="false">
        <h4 class="panel-title">
        <svg class="svg-inline--fa fa-shopping-bag fa-w-14 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="shopping-bag" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M352 160v-32C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128v32H0v272c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V160h-96zm-192-32c0-35.29 28.71-64 64-64s64 28.71 64 64v32H160v-32zm160 120c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zm-192 0c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24z"></path></svg><!-- <i class="fas fa-shopping-bag fa-lg"></i> --> Ses boutiques <span class="badge">0</span>
        <span class="collapse-change-icon"><svg class="svg-inline--fa fa-plus-circle fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="plus-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg><!-- <i class="fas fa-plus-circle fa-lg"></i> --></span>
        </h4>
      </a>
    </div>
    <div id="collapse6" class="panel-collapse collapse" aria-expanded="false">
      <div class="panel-body"><dd><div class="views-element-container form-group"><div class="view view-profil-page-boutique view-id-profil_page_boutique view-display-id-block_1 js-view-dom-id-9f21023e83a67893ad096dcbb218ba8b477f895466709aba0b5f909f705b740d">


      <div class="view-header">
      Résultat trouvé 0
    </div>

      <div class="view-empty">
      <p>Aucune boutique n'a était publiée.</p>

    </div>



          </div>
</div>
</dd></div>
    </div>
  </div>
</div>

Here is my JS code. Something is wrong with it.

(function ($) {

  $('.collapse').on('shown.bs.collapse', function () {
       $(this).find('.collapse-change-icon svg').removeClass("fa-plus-circle").addClass("fa-minus-circle");
  });

  $('.collapse').on('hidden.bs.collapse', function () {
       $(this).find('.collapse-change-icon svg').removeClass("fa-minus-circle").addClass("fa-plus-circle");
  });

})(window.jQuery);

I added a class “collapse-change-icon”, but I do not know if it’s useful and if it’s well placed.

Answer

The icon that you want to change isn’t inside the .collapse DOM element. It’s inside the .panel-heading element.

(function ($) {

    $('.collapse').on('shown.bs.collapse', function () {
        $(this).parent().find('.panel-heading .collapse-change-icon svg').removeClass("fa-plus-circle").addClass("fa-minus-circle");
    });

    $('.collapse').on('hidden.bs.collapse', function () {
        $(this).parent().find('.panel-heading .collapse-change-icon svg').removeClass("fa-minus-circle").addClass("fa-plus-circle");
    });

})(window.jQuery);