Question

I am using the jqueryrotate plugin and it works if I want to rotate the content of the parent id, but I want to rotate a span that is a child of the id. I am not finding the right syntax to target the span.

$(".faqq").click(function(){
        var showthis = "#" + this.id + "a";

            /* .plus is the class name of the span I am trying to target */
        var rotatethis = "#" + this.id + " .plus";

        $(showthis).slideToggle('fast');
        $(rotatethis).rotate({
            angle: 0, 
            animateTo:225
          })
    });

Can someone see what I am doing wrong? Thanks!

EDIT: HTML Example:

<p id="faqq1" class="faqq">
            <strong>Q. Where is my order? <span class="plus">+</span></strong>
        </p>
<p id="faqq1a" class="faqa">
            A. You can ...what we know.
        </p>

Answer 1

Make sure your .plus has positioning that allows its position to be set.

$(rotatethis)
          .css('position','relative')
          .rotate({
            angle: 0, 
            animateTo:225
          });

You’d probably want to do this in CSS instead of with jQuery’s .css().

---

Side note, but I’d replace this…

var rotatethis = "#" + this.id + " .plus";
$(rotatethis)

with this…

$(this).find('.plus')

---

EDIT:

Instead of position: relative, the issue was that display: block was needed.