Bootstrap 4 custom list-group collapse caret functioning incorrectly

Question

I have customized a Bootstrap 4 list-group, to include the collapse functionality.

I have included a css caret arrow, so the use case should be: 1. initial state is pointing down 2. when clicked points up 3. clicked again points back down to its initial state

My issue is is that on the initial click the caret does not do anything, only when it is clicked a second time it will point up.

I am using the css transform selectors to rotate the caret up/down.

Why does this not work properly, am I missing something/doing something incorrectly?

.btn {
  box-shadow: none !important;
  outline: 0;
}

a:link,
a:visited {
  color: #222;
}

a:hover,
a:focus {
  color: orange;
}

.list-group-item span {
  cursor: pointer;
  border: solid #222;
  border-width: 0 1px 1px 0;
  transform: rotate(40deg);
  transition: .3s transform ease-in-out;
  display: inline;
  padding: 3px;
  position: absolute;
  right: 0;
  margin-top: 10px;
}

.list-group-item .collapsed span {
  transform: rotate(-140deg);
  margin-top: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col">
      <div class="my-5">
        <ul class="list-group list-group-flush">
          <li class="list-group-item px-0">
            <a class="btn" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="true" aria-controls="collapseExample1">
              <span class="mr-3"></span> Link with href
            </a>
            <div class="collapse" id="collapseExample1">
              <div class="card card-body mt-2">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
            </div>
          </li>
          <li class="list-group-item px-0">
            <a class="btn" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="true" aria-controls="collapseExample2">
            Link with href <span class="mr-3"></span>
  </a>
            <div class="collapse" id="collapseExample2">
              <div class="card card-body mt-2">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
            </div>
          </li>
          <li class="list-group-item px-0">
            <a class="btn" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="true" aria-controls="collapseExample3">
    Link with href <span class="mr-3"></span>
  </a>
            <div class="collapse" id="collapseExample3">
              <div class="card card-body mt-2">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Solution

Try this instead:

1. Initial state is pointing down; modify your anchors / links to add class collapsed.

   <a class="btn collapsed" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="true" aria-controls="collapseExample1">Link with href<span class="mr-3"></span></a>
   

2. When clicked points up; add to your CSS code:

   .list-group-item a.btn span {
     transform: rotate(-140deg);
     -webkit-transform: rotate(-140deg);
     transition: .3s transform ease-in-out;
   }
   

   Modify your CSS code:

   .list-group-item span {
     cursor: pointer;
     border: solid #222;
     border-width: 0 1px 1px 0;
     transform: rotate(40deg);
     -webkit-transform: rotate(40deg);
     transition: .3s transform ease-in-out;
     display: inline;
     padding: 3px;
     position: absolute;
     right: 0;
     margin-top: 10px;
   }
   

3. Clicked again points back down to its initial state; add to your CSS code:

   .list-group-item a.btn.collapsed span {
     transform: rotate(40deg);
     -webkit-transform: rotate(40deg);
     transition: .3s transform ease-in-out;
   }
   

4. Remove CSS code:

   .list-group-item .collapsed span {
     transform: rotate(-140deg);
     -webkit-transform: rotate(-140deg);
     margin-top: 10px;
   }
   

Snippet Here

.btn {
  box-shadow: none !important;
  outline: 0;
}

a:link,
a:visited {
  color: #222;
}

a:hover,
a:focus {
  color: orange;
}

.list-group-item span {
  border: solid #222;
  border-width: 0 1px 1px 0;
  display: inline;
  cursor: pointer;
  padding: 3px;
  position: absolute;
  right: 0;
  margin-top: 10px;
}

.list-group-item a.btn.collapsed span {
  transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  transition: .3s transform ease-in-out;
}

.list-group-item a.btn span {
  transform: rotate(-140deg);
  -webkit-transform: rotate(-140deg);
  transition: .3s transform ease-in-out;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  <div class="container">
    <div class="row">
      <div class="col">
        <div class="my-5">
          <ul class="list-group list-group-flush">

            <li class="list-group-item px-0">
              <a class="btn collapsed" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="true" aria-controls="collapseExample1">
            Link with href<span class="mr-3"></span>
            </a>
              <div class="collapse" id="collapseExample1">
                <div class="card card-body mt-2">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                </div>
              </div>
            </li>

            <li class="list-group-item px-0">
              <a class="btn collapsed" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="true" aria-controls="collapseExample2">
            Link with href<span class="mr-3"></span>
            </a>
              <div class="collapse" id="collapseExample2">
                <div class="card card-body mt-2">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                </div>
              </div>
            </li>

            <li class="list-group-item px-0">
              <a class="btn collapsed" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="true" aria-controls="collapseExample3">
            Link with href<span class="mr-3"></span>
            </a>
              <div class="collapse" id="collapseExample3">
                <div class="card card-body mt-2">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                </div>
              </div>
            </li>

          </ul>
        </div>
      </div>
    </div>
  </div>


</body>

</html>

Just Fiddle

See code on Just Fiddle

Comments

[Krys]

thank you very much. I understand now why it was not working properly.

[Luhhh]

How could I put an additional link to another page in the text: Link with href?

[Luhhh]

<li class="list-group-item px-0"> <a class="btn collapsed" data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="true" aria-controls="collapseExample3"> <a href="someURL">Link with href</a> <span class="mr-3"></span> </a>