CODEWITHSUNDEEP
csstwitter-bootstrapsvg
user9219182
user9219182

Reputation: 349

CSS: Rotate only the SVG image, not the button text, in Bootstrap accordion

I have the following code for a button that controls an accordion in Bootstrap; there's no custom CSS for this:

<div class="accordion-header" id="headingOne">
     <button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne">
       <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-caret-right-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
     </svg>
     <span class="label">Details</span>
     </button>
</div>

In its collapsed state (when the button has the addition class "collapsed"), this renders, correctly, as:

Details start

When the accordion is open (i.e. when the button does not have the "collapsed" class), I'd like the svg image--the triangle--to be rotated 90 degrees, pointing down, towards the opened accordion text.

How do I do this? I tried:

.accordion-header .btn.btn-link { transform: rotate(90deg); }
.accordion-header .btn.btn-link.collapsed { transform: rotate(0deg); }

But this rotates the entire button, including the label, giving the rather awkward:

Details badly rotated

I can't figure out how to exclude the "label" from this transformation.

tl;dr: The goal is to have the collapsed state have the triangle as it is specified in the SVG, and in the not-collapsed state have the triangle (but only the triangle, not the text) rotated 90 degrees.

Upvotes: 1

Views: 469

Answers (1)

SidPro
SidPro

Reputation: 423

try this ..

.accordion-header .btn.btn-link svg{ transform: rotate(90deg); }
.accordion-header .btn.btn-link.collapsed svg{ transform: rotate(0deg); }

i have tried onhover it's working fine

svg:hover{
 -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */'
   transform: rotate(90deg);
 }
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-caret-right-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
           <path d="M12.14 8.753l-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/>
</svg>

Upvotes: 3

Related Questions