Поворот картинки при открытии меню на Jquery или css?

Question

[valitskiydmitriy]

Есть вот такой код html код:

<div id="accordion" class="accordion">
    <div class="link"><p>Последняя Пятерка Зарегестрированных</p>
    	<img class="pik" src="img/index/pik.png">
    </div>
    <div class="submenu">
    <table class="brd">
    <tr>
        <th>ID</th>
        <th>Имя/Логин</th>
        <th>Дата Регистрации</th>
    </tr>
    <tr>
 ...ИТД
</table>
    </div>

Вот такой css:

.top .accordion {
width: 425px;
margin: 30px auto 20px;
background: #FFF;
border-radius: 4px;
}

.top .accordion .link {
cursor: pointer;
display: block;
border-radius: 5px;
padding: 0px 0px 0px 5px;
background-color: #f7f7f7;
color: #4D4D4D;
position: relative;
height: 35px;
margin-top: 30px;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}

.top .accordion .link p {
font-family: HelveticaNeueCyr-Roman;
font-size: 19px;
color: #595959;
padding: 7px 0px 0px 0;

}

.top .accordion .link .pik {
    position: relative;
    float: right;
    margin: -58px -28px 0px 0px;
}

.submenu {
display: none;
background: #f1f1f1;
font-size: 14px;
font-family: HelveticaNeueCyr-Light;
}

.submenu brd {
font-family: HelveticaNeueCyr-Light;
}

.submenu div.block img.down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

И вот такой js:

$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;

var links = this.el.find('.link');
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
}

Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();

$next.slideToggle();
$this.parent().toggleClass('open');

if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}

var accordion = new Accordion($('#accordion'), false);
});

И тут два вопроса, почему при открытии, submenu как бы отскакивает вниз, и на секунду образуеться белый не красивый пробел и смотрится дерганно?

И как сделать что бы картинка "ipk" при открытии и закрытии прокручивалась на 180 градусов?

Answer 1

[Aleksandr]

Ну чтобы картинка прокручивалась можно использовать
transform: rotate(<число>deg)

А для остального - залейте на jsfiddle.net

Comments

[valitskiydmitriy]

Александр Котов Это понятно, а куда и как подставить?

[Aleksandr]

valitskiydmitriy:
$next.slideToggle();
$this.parent().toggleClass('open');
$this.children('img').css('transform', 'rotate(180deg)');

[valitskiydmitriy]

Александр Котов Спасибо! Теперь если открыть то div вращается, а как сделать на закрывание такое же?

[Aleksandr]

valitskiydmitriy: Два способа есть. Можешь написать условие, if hasClass. Или сделать доп класс и также toggleClass менять

[valitskiydmitriy]

Александр Котов Использую условие, но чет никак, вообще допереть не могу :С

[Aleksandr]

valitskiydmitriy: jsfiddle.net/fj3w9e9f

[valitskiydmitriy]

Александр Котов Спасибо! Но у меня подподряд стоят три таких div с картинками, в случае если один то работает, но если поставить 3, тогда нет, как быть? Крутится только при открытии

[Aleksandr]

valitskiydmitriy: Выложите на jsfiddle.net вашу верстку

[valitskiydmitriy]

Александр Котов: jsfiddle.net/0kv4we2g

[Aleksandr]

valitskiydmitriy: jsfiddle.net/0kv4we2g/1