Rotate SVG image when Bootstrap 4 collapse is clicked

user_4454909 0
Viewed 3524

I'm trying to rotate the SVG icon from up position to down position when clicked.

Pure CSS solution would be great but I can't figure out. It works for an font icon but I can't use font icon in this case. Only an image or SVG can be used.

How can I go about this?

.collapse-arrow .icon {
  transition: .3s transform ease-in-out;
}

.collapse-arrow .collapsed .icon {
  transform: rotate(-180deg);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="collapse-arrow">
        <a data-toggle="collapse" class="collapsed" href="#collapseFilter">
          <span class="icon">
             <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="16px" height="16px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;"
         xml:space="preserve">
      <g>
        <path d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751
          c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0
          c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"/>
      </g>
             </svg>
          </span>
          <strong>Link to toggle</strong>
        </a>
        <div class="collapse" id="collapseFilter">
          <p>Some content I want collapsed or expanded</p>
        </div>
      </div>
    </div>
  </div>
</div>

bootstrap-4 twitter-bootstrap css-transitions css
1 Answers

You can update the transform when the class is added to the anchor tag. 

.collapse-arrow .icon {
  transform: rotate(-180deg);
  transition: .3s transform ease-in-out;
  display: inline-block;
}

.collapse-arrow .collapsed .icon {
  transform: rotate(0deg);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="collapse-arrow">
        <a data-toggle="collapse" class="collapsed" href="#collapseFilter">
          <span class="icon">
             <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="16px" height="16px" viewBox="0 0 451.847 451.847" style="enable-background:new 0 0 451.847 451.847;"
         xml:space="preserve">
      <g>
        <path d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751
          c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0
          c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"/>
      </g>
             </svg>
          </span>
          <strong>Link to toggle</strong>
        </a>
        <div class="collapse" id="collapseFilter">
          <p>Some content I want collapsed or expanded</p>
        </div>
      </div>
    </div>
  </div>
</div>

user_55616050
Related