Search code examples
bootstrap-4iconsfont-awesomebootstrap-table

Bootstrap 4 Collapse state with Font Awesome icon

I have a Bootstrap-table with Expand / Collapse but the start icon is not good. The start icon when collapsed is "minus" and should be "plus", but if it's cliked 2 times, everything is OK.

I have used this example : Bootstrap 4 Collapse show state with Font Awesome icon

my code : https://jsfiddle.net/d7ycu6ne/

Thanks for your help

Solution

  • Your CSS:

    [data-toggle="collapse"].collapsed .fa:before {
  content: "\f067"; /*plus*/
}

    requires the row to have a class called "collapsed" in order to show the plus. But you haven't given it that class:

    <td data-toggle="collapse" data-target="#accordion1" 
    class="clickable" style="cursor:pointer">

    If you use your browser's dev tools to look at the DOM, you will see that the Bootstrap library is adding that "collapsed" class whenever you click the minus to collapse (beginning with the second click).

    So of course you should start the element with that class already applied:

    <td data-toggle="collapse" data-target="#accordion1"
    class="clickable collapsed" style="cursor:pointer">