Utilizing jQuery version 1.12.4 to rotate a chevron icon by 180 degrees upon clicking it

I'm struggling to accomplish a seemingly simple task of rotating this chevron 180 degrees on click. The Rich Text Editor converts <i> tags to <em>, and we are using an outdated jQuery version (1.12.4). Despite trying multiple scripts, I have not been successful so far. Can anyone spot what I might be overlooking?

$(document).ready(function() {
    $('#view-more-cards').click(function() {
       $('.smb-chevron-container > a > em > svg').css('transform', 'rotate(180deg)');
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="container">
  <div class="smb-chevron-container" id="view-more-cards">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#view-more">View all internet solutions
      <em>
        <svg xmlns="http://www.w3.org/2000/svg" id="view-more-chevron" width="14.223" height="7.111" viewbox="0 0 14.223 7.111">
          <g id="Ren_Icons_Controls_add-maximize" data-name="Ren/Icons/Controls/add-maximize">
            <path id="smb-chevron" d="M7.111,7.111a.789.789,0,0,1-.535-.2L.219,1.158A.634.634,0,0,1,.219.2a.806.806,0,0,1,1.06,0l5.832,5.28L12.943.2A.806.806,0,0,1,14,.2a.634.634,0,0,1,0,.959L7.646,6.912a.789.789,0,0,1-.535.2Z" fill="#0057b8"></path>
          </g>
        </svg>
      </em>
    </a>
  </div>
</div>

<div class="collapse" id="view-more">
  Hello World
</div>

Demo: https://jsfiddle.net/Codewalker/5su8029z/4/

Answer №1

I introduced a new condition in your jQuery code. The purpose is to verify if the element is currently expanded, and if so, reset the rotation back to 0deg.

if($('.smb-chevron-container > a').attr("aria-expanded") == "true"){
  $('.smb-chevron-container > a > em > svg').css('transform', 'rotate(0deg)');
}else{
  $('.smb-chevron-container > a > em > svg').css('transform', 'rotate(180deg)');
}
       

DEMO

$(document).ready(function() {
    $('#view-more-cards').click(function() {
      if($('.smb-chevron-container > a').attr("aria-expanded") == "true"){
        $('.smb-chevron-container > a > em > svg').css('transform', 'rotate(0deg)');
      }else{
        $('.smb-chevron-container > a > em > svg').css('transform', 'rotate(180deg)');
      }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<div class="container">
  <div class="smb-chevron-container" id="view-more-cards">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#view-more">View all internet solutions
      <em>
        <svg xmlns="http://www.w3.org/2000/svg" id="view-more-chevron" width="14.223" height="7.111" viewbox="0 0 14.223 7.111">
          <g id="Ren_Icons_Controls_add-maximize" data-name="Ren/Icons/Controls/add-maximize">
            <path id="smb-chevron" d="M7.111,7.111a.789.789,0,0,1-.535-.2L.219,1.158A.634.634,0,0,1,.219.2a.806.806,0,0,1,1.06,0l5.832,5.28L12.943.2A.806.806,0,0,1,14,.2a.634.634,0,0,1,0,.959L7.646,6.912a.789.789,0,0,1-.535.2Z" fill="#0057b8"></path>
          </g>
        </svg>
      </em>
    </a>
  </div>
</div>

<div class="collapse" id="view-more">
  Hello World
</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

Position of the text in MVC5 Razor Response.Write

Currently attempting to insert a label using Response.Write <div> @if (ViewBag.Message == "1") { Response.Write(Html.Label("text")); } </div> Although it is functioning, the text appears at the top of the screen instea ...

Creating proper spacing at the bottom of a website using HTML and CSS

Currently, I am facing an issue with empty space at the bottom of my website. You can view the website here: click The repository for the website is available at: https://github.com/bdevelops/feditor I have looked through stack overflow questions and tri ...

What is the best way to make a layout widget stretch to fill the entire height in w2ui?

Recently, I've been experimenting with a newer JavaScript/jQuery UI library called w2ui. I have successfully implemented a layout in my LAMP application, but now I'm curious about how to make the layout div occupy the full height of the screen. F ...

The ng-model may fail to update during certain change events

Implementing the Angular chosen-select, I have tailored it to support dynamic loading by fetching data from the server. An issue arises when I unselect a value - although it removes it from the selected items, it fails to update the ng-model. Interestingl ...

Pressing the reset button on a basic calculator

I am experiencing an issue with my calculator. It works fine initially, but after using the reset button, it stops functioning properly. Currently, I only have the multiplication set up as I debug this problem. I am new to JavaScript and would appreciate a ...

Mastering jQuery UI: A beginner's guide to utilizing the date picker widget

This is my first venture into the world of HTML and JavaScript, so I am asking for your patience. I am trying to incorporate the Datepicker widget from jQuery UI, following the instructions on the Getting Started page. There seems to be an issue with lin ...

What could be causing my bootstrap 3.7 carousel to not function properly?

I've been trying to implement this feature of bootstrap by following a guide, but I can't seem to figure out why it's not working. I have all the CDNs and Js Script linked in my header, directly copied from the bootstrap website. <div id ...

What is the best way to adjust the size of a div element so that it is

I am facing an issue with a table that contains a TreeView within a cell. The code snippet is shown below: <style> #leftPanel { width:60px; height:'100%'; border:1px solid red; ...

Tips for enhancing a table cell using JavaScript

Is it possible to use javascript to style a specific cell in an HTML table? A sample HTML table is provided below: <table border="1" width="300" height="200"> <tr> <td id="11">& ...

"Changing background color, incorporating hover effects, utilizing !important, and manipulating .css properties with

Encountered a dilemma. I devised a "tabs" feature illustrated in the following demo: http://jsfiddle.net/4FLCe/ The original intention was for the tab to change color to A when hovered over, and to color B when clicked on. However, as shown in the demo, ...

The initial <hr> tag is the only one that is not currently displaying

While working on a page, I encountered an issue where a simple <hr> tag was not displaying. After some investigation, I noticed that if there are multiple <hr> tags on the page, only the first one would not show up while the others did. I have ...

Eliminate any duplicate elements in the array, while adding a note to the remaining row indicating that there were

Every day, I receive a list of newspaper articles from various sources. Since many newspapers belong to larger chains, it's tedious to sift through identical versions of the same article. However, we do want to know how many other outlets carried the ...

Obtaining the clicked ActionLink ID and using it as an argument in a function

Struggling with this issue for more than 24 hours now. I'm trying to figure out how to pass an actionlink id to a jQuery ajax call in order to enable a partial page update. <li>@Html.ActionLink(@item.strCountry, "Index", "Weather", new { id = R ...

Creating an interactive navigation system using drag-and-drop functionality

Currently, I am in the process of constructing a new website solely for educational purposes and am interested in incorporating a drag-and-drop sorting feature. While I am aware that jQuery offers the sortable UI component at http://jqueryui.com/sortable/, ...

Tips for Keeping Footer Aligned with Content:

When checking out this website, you may notice that the footer appears to be affixed to the left side. The CSS code responsible for this is as follows: #footer { width: 800px; clear:both; float:right; position:relative; left:-50%;} I would appreciate it ...

The art of bringing a pseudo class to life through animation

Seeking assistance with achieving a unique effect on click event. I have set up a slanted or razor-blade style div using a parent div element and a pseudo-element :after (as shown below). My goal is to change the skew angle when the user clicks on the pare ...

Creating a Fractional Division Formula in HTML

My goal is to create code that displays various mathematical formulas. The formula I am focusing on right now is for the mean (average) and it currently looks like this: ∑n⁄n: <span class="frac"><sup>&sum;n</sup><span> ...

How can the CSS inside the editor be customized in ng2-ckeditor?

I am looking to customize the functionality of the ENTER key in ng2-ckeditor. I have read about a config option that can help with this on this site. It seems that custom CSS is recommended for making these changes: To adjust paragraph spacing, it is sug ...

Styling and theming in PrimeNG

Seeking advice on how to customize the appearance of the background for the primeNG panel component. I attempted to override the styling using the specific names in my scss file for the component, but it did not work. I also tried inline with <p-panel ...

Automatically clicking the YouTube play button upon loading the video

Can anyone help me with automatically clicking the YouTube play button upon page load on a mobile device? I am currently using an iframe to display the YouTube video, which is set to autoplay on desktop but shows the play button on mobile devices. <s ...