Spin the SVG image upon clicking the Bootstrap 4 collapse feature

I am attempting to create a toggle effect for an SVG icon, rotating it from the up position to the down position when clicked.

While a pure CSS solution would be ideal, I am struggling to implement it for an SVG icon. Unfortunately, I cannot use a font icon in this scenario; only an image or SVG can be utilized.

Is there a method I can use to achieve this effect?

.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>

twitter-bootstrapcssbootstrap-4css-transitions

Answer №1

Make sure to update the transform property when the specific class is applied 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display information based on the radio button chosen

I've set up a radio button with options for "no" and "yes", but neither is selected by default. Here's what I'm trying to achieve: If someone selects "no", nothing should happen. However, if they select "yes", then a message saying "hello w ...

javascriptjqueryhtmlcss

Ensure that the text on the button is aligned to the right and is positioned directly

Looking to adjust the alignment of the menu icon on the left side of the menu text. Unsure about the best approach with my current CSS - should I utilize a grid layout to separate them on one side each, or perhaps use flexbox to align them inline? Below i ...

htmlcsssvg

Aligning text in the middle of a div vertically

Visit the Satoshi Faucet Index here I'm attempting to vertically align the text within the four divs containing sat, bit, mBTC, and BTC. I have tried using display:table-cell; vertical-align:middle; on the divs but unfortunately it isn't havi ...

htmlcssbitcoin

Quickly redesigning the appearance of file input using javascript and jquery. Seeking assistance to correct css issues on jsfiddle

Hey there, I've been working on styling the input[type="file"] element and could use some assistance. Like the saying goes, "One JSfiddle is worth 1000 words," so here's the link to my example: --- For more details, click here: http://jsfiddle.n ...

javascriptjqueryhtmlcsscss-float

What is the best way to create a div that extends beyond the borders of the screen, but still allows only

I am currently working on a React project for a website. I am creating a category bar that should slide only the component in the mobile version, without moving the entire page. Check out the desired design here However, the current appearance is differe ...

javascripthtmlcssreactjsbootstrap-4

Is it possible to conceal my Sticky Div in MUI5 once I've scrolled to the bottom of the parent div?

Sample link to see the demonstration: https://stackblitz.com/edit/react-5xt9r5?file=demo.tsx I am looking for a way to conceal a fixed div once I reach the bottom of its parent container while scrolling down. Below is a snippet illustrating how I struct ...

javascriptcssreactjstypescriptmaterial-ui

changing background color smoothly in a short time without using JQuery

Check out this link for some code .back { margin: 20px; padding: 100px; background: yellow; font-size: 30px; } <div class="back"> Fun place to stay. We got a golf cart to see the rest of the island, but the ...

htmlcss

Tips on rearranging the location of a div element within a directive

I have created a custom directive that displays two divs, Div1 and Div2, with a splitter in the middle: Splitter Image Now, I am looking for a way to swap the positions of these two divs dynamically using an Angular directive. I thought about using ng-swi ...

javascripthtmlcssangularjsangularjs-directive

The background image is not displaying correctly on mobile devices

I'm struggling to make the image fit the entire screen on a mobile device using the code below. Interestingly, it displays correctly on my personal computer. #topContainer { height:1048px; width: 100%; padding: 0; margin: 0; } #div1 { ...

htmlcsstwitter-bootstrap-3

What separates text-align:center from margin auto?

As someone who is just beginning to learn about CSS, I have come across the properties: text-align:center; and margin:auto; Both of these seem to center elements, but how exactly do they differ from each other? Any insights would be much appreciated. T ...

css

Fetching dynamic information via AJAX for a jQuery tooltip

I have successfully loaded content via AJAX, including a UL element with li items that each have tooltips. Now I want to load tooltip content via AJAX for each individual li item. How can I achieve this? Currently, I am making an AJAX call to load the li ...

javascriptjquerycssajaxjquery-tooltip

Tips for resetting the form input fields in Vue.js after the user has successfully submitted the form

I am facing an issue with my registration page. After the user enters some values and successfully submits the form, I want to clear all the fields. To achieve this, I am using a predefined function called reset() inside the script section. However, the ...

javascripthtmlcssvue.js

Issue with the flexbox div not fully occupying the vertical space

I can't seem to get flexbox to fill the spaces as I want it to. I've been trying to figure out what I'm missing, but I just can't wrap my head around it. Here's a recreation of the issue with a link to a codepen. I want the div in ...

htmlcssflexbox

CSS - What's the source of this mysterious whitespace?

I'm currently making adjustments to a Wordpress website that is designed to be responsive. The site uses media queries to adapt its display based on the user's screen size, and everything looks great except for when the screen width is at its sma ...

htmlcss

Get rid of any fonts that are causing rendering delays on amp pages

Encountering issues with Google Lighthouse and AMP Pages https://i.sstatic.net/EXiha.png I have attempted various solutions but none seem to be working <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400, ...

htmlcssfontsamp-htmllighthouse

Tips for creating a dynamic variable for an object key in jQuery to streamline your code

Utilizing the TweenMax library, I am adding styles to a div while scrolling. However, I am facing a challenge where I need different styles based on varying page resolutions. To address this issue, I implemented an if condition. Is there a way I can use a ...

javascriptjquerycssgsap

How can I remove the border of an image hyperlink using CSS?

Let's consider the following situation: I have defined the CSS rule a { color: Red } When using Internet Explorer, if I have: <a href="..."> <img src='...' /> </a> it results in a red border around the image. How can ...

css

If the navigation menu contains sub-menus, it should slide to the left

I am currently working on developing a navigation menu with four levels of depth. The menu displays three levels at a time, and when the user reaches the fourth level, the first level should move to the left to make room for the second, third, and fourth l ...

jqueryhtmlcssmenunavigation

Display a modal upon successful validation of a form

As a newcomer to JavaScript and Bootstrap, I have a specific requirement: 1. When a user clicks the submit button, 2. The form needs to be validated using the entry_check() function. 3. Upon successful validation of the form, a Bootstrap modal should be op ...

javascriptjqueryhtmlformstwitter-bootstrap

Having trouble with Bootstrap 5 sticky-top functionality within a container?

Why is my <nav> not sticking to the top of the viewport when scrolling, even though it has the .sticky-top class? <!doctype html> <html lang="en"> <head> <meta charset="utf-8> <meta name="viewport" content="wi ...

csstwitter-bootstrapbootstrap-5