Question

I have a script that works for the slider. But now I need to rotate an arrow image with the HTML like this:

http://jsfiddle.net/nicorellius/gsDVS/

The image I’m using is currently a background image on the class, byline.

The jQuery script is here:

// expanding, collapsing div script
$(document).ready(function() {
    $(".toggle-content").hide();
    $(".byline").click(function() {
        //$(this).attr("id", "down-arrow");
        var $next = $(this).next(".toggle-content");
        $(".toggle-content").not($next).slideUp();
        $next.slideToggle(500);
        //$next.attr("id", "");
    });
});

This works to change the image from left to down, eg, id from empty to down-arrow. But when I click to close the slider, the image stays as left. I’m getting confused on how to rework this script to change the image back. The images currently are separate, one facing left and the other facing down. I should probably use a single image sprite, but I’m just trying to get this figured out first.

I read this post and this is a good idea, but maybe a bit too complex for me right now to implement:

Rotate image on toggle with jQuery

Thanks.

EDIT

I should note that my page in question here is a bit different than the fiddle I showed:

<div class="byline">
    <h4 class="crp-h">Analyze</h4>
    <p class="crp-p">Things are written here</p>
</div>

<div class="toggle-content">
    <ul class="crp-list">
        <li>Statistical</li>
        <li>Robust</li>
    </ul>
</div>

Thanks One Trick Pony… this thing is almost working except for one thing. The rotation only works when the this div is clicked. When the non-this div is clicked the other divs hide but the image remains un-rotated:

.byline{
  position:relative;     /* required */
}    


.byline:after {
    transform: rotate(-90deg);
    content: '';           /* required */
    position:absolute;     /* required */
    width: 14px;           /* required, width of your arrow */
    height: 14px;          /* required, height of your arrow */
    right: -20px;          /* required, negative width + some padding */
    top:0;                 /* required */
    background: url('your/arrow/image/here.png') no-repeat;
}

.byline.exp:after {
    transform: rotate(0deg);
}

The new jQuery is here:

// expanding, collapsing div script
$(document).ready(function() {
    $(".toggle-content").hide();
    $(".byline").click(function() {
        var $next = $(this).next(".toggle-content");
        $(".toggle-content").not($next).slideUp();
        $next.slideToggle(500);
        $(this).toggleClass('exp');
    });
});

The fiddle showing this is here:

http://jsfiddle.net/nicorellius/7AYjj/

Answer 1

Put the arrow graphic on an pseudo-element like :after, and transform it, based on a class that you toggle on the trigger link:

.byline:after{
    transform: rotate(-90deg);
    /* arrow as background here */
}

.byline.exp:after{
    transform: rotate(0deg);
}

in your click event add:

$(this).toggleClass('exp');