Rotating arrow issue

Question

So I have a FAQ thingy that I made. Everything is working nicely, except I would like the ion icon to rotate 90 degrees when I click on the specific list element. Here is one of the 6 HTML blocks I have

<li class = "q"><i class = "ion-arrow-down-a"></i> Lorem ipsum dolor sit amet,kdfssdfksdfkdfskfsdkfdskfdskkfdskfdskdsf</li>

 <li class = "a">blahfshfshbshhaj JFDSJSDFJFSDJFSDJFSDJFJDSJFSDJFSDJFDJFDJFSDJ</li>

I have about 6 more of these. Now my jQuery is where the real issue lies at. Everything up to the slideUp(); portion is working fine. But the ion icon isn't rotating at all.

var action = "click";
var speed = 500;

$(document).ready(function(){
    $('li.q').on(action,function(){
        $(this).next()
            .slideToggle(speed).
            siblings('li.a').
        slideUp();
    var i = $(this).children('i');
    $('i').not(i).removeClass('rotate');
    i.toggleClass('rotate');
    });
});

In my CSS I have also made a rotate class

.rotate
{
    transform:rotate(90deg);
}

Any help is appreciated

Answer 1

Reason

Contrary to what was originally mentioned in the other answer, the problem is not because the class is added to the i element. Instead it is because of the display setting of the elements.

CSS transform does not work on inline elements. They work only on elements whose display is block, inline-block, inline-table etc. Below is an extract from the W3C Spec:

transformable element

A transformable element is an element in one of these categories:

• an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]
• an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11].

atomic inline-level element

Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes

By default most browsers set i element as display: inline. So, when the transform is applied to it (through the rotate class), it has no effect at all. That is, the element doesn't rotate (and so, the pseudo-element also remains un-rotated).

It works when you directly set the transform to rotate:before because all pseudo-elements have their display set as inline-block by most browsers.

---

Solution

Change the display of i element to be inline-block. This would mean that the rotate transform would actually have an effect.

When you add a transform to an element all its child elements (which includes pseudo-elements) will be affected by the transform and so there is no need to set the class to the pseudo-element.

var action = "click";
var speed = 500;

$(document).ready(function() {
  $('li.q').on(action, function() {
    $(this).next()
      .slideToggle(speed).
    siblings('li.a').
    slideUp();
    var i = $(this).children('i');
    $('i').not(i).removeClass('rotate');
    i.toggleClass('rotate');
  });
});

.rotate {
  transform: rotate(90deg);
}

/* add this setting */

i {
  display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="q"><i class="ion-arrow-down-a"></i> Lorem ipsum dolor sit amet,kdfssdfksdfkdfskfsdkfdskfdskkfdskfdskdsf</li>

<li class="a">blahfshfshbshhaj JFDSJSDFJFSDJFSDJFSDJFJDSJFSDJFSDJFDJFDJFSDJ</li>