0

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/

Community
  • 1
  • 1
nicorellius
  • 3,715
  • 4
  • 48
  • 79

1 Answers1

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');
nice ass
  • 16,471
  • 7
  • 50
  • 89
  • I see the fiddle working and this makes sense. Also, when I implement it, my slider/hider works and I see the class `byline exp` in Firebug, so I know it's somewhat working... But the darn image isn't showing up. I confirmed the path in my style sheet is good and that the image is on the server... Based on existing formatting, I didn't use the `position` values you used. Could this be causing my problem? – nicorellius Jan 24 '13 at 21:20
  • Did you add all the styles from my example? `:after` requires `content:''` and all that... – nice ass Jan 24 '13 at 21:22
  • Yes, I did... I just made an edit to my question. My HTML is not quite the same as the fiddle... I'm not familiar with the after pseudo class, so I think I will read up a bit... Is the `content:''` the only dependency I need here? – nicorellius Jan 24 '13 at 21:29
  • You can use whatever element you want for the arrow, it doesn't have to be `:after`, but it needs to be a new element. [Here](http://jsfiddle.net/eMUhK/)'s how your CSS is supposed to be – nice ass Jan 24 '13 at 22:27
  • Thanks a bunch One Trick Pony! MY collapsible `div`s with rotating arrows are mostly working. I will definitely accept your answer, but I do have one other problem... If I open the `div`, the arrow changes (good), and when I click the `this` `div` the arrow rotates back, but then if I open a `non-this` `div`, the other `div`s are hidden but the image remains un-rotated. – nicorellius Jan 24 '13 at 23:13
  • Ha! Thanks... I was just coming to the same conclusion myself... Thanks again for your time. – nicorellius Jan 24 '13 at 23:38