Поворот изображения при клике на ссылку
Вложений: 2
Доброго времени суток!
На сайте есть кнопка, при клике на которую раскрывается содержимое.
<div >
<a href="#" id="link" class="param" onclick="toggle(hidden_content)">Раскрытие/скрытие содержимого
<span class="arrow"></span>
</a>
</div>
function toggle(el) {
el.style.display = (el.style.display == 'none') ? '' : 'none'
}
span class="arrow" это изображение со стрелкой (изначальное положение скрин "Стрелка вниз")
.arrow
{
float: right;
margin-top: 0px!important;
width: 80px;
height: 80px;
background: url(/images/select_white.png) center no-repeat #219e82!important;
}
Необходимо, при клике на кнопку переворачивать изображение со стрелкой (скрин "Стрелка вверх") с раскрытием содержимого. При повторном нажатии на кнопку обратно переворачивать изображение со стрелкой и сворачивать содержимое. Подскажите, пожалуйста, как на основании кода function toggle(el) произвести переворот стрелки. Спасибо. |
function toggle(el) {
el.style.display = (el.style.display == 'none') ? '' : 'none'
var elt = document.querySelector('.arrow')
elt.style.transform = elt.style.transform == "rotate(180deg)"?"rotate(0deg)":"rotate(180deg)";
}
|
j0hnik, спасибо что откликнулись :)
100% попадание, супер!!! :yes: Огромнейшее спасибо :thanks: |
.arrow--active {
transform: scaleY(-1);
}
function toggle(el) {
el.style.classList.toggle('arrow--active');
}
|
| Часовой пояс GMT +3, время: 14:23. |