Показать сообщение отдельно
  #1 (permalink)  
Старый 29.05.2018, 10:14
Профессор
Отправить личное сообщение для _marisha Посмотреть профиль Найти все сообщения от _marisha
 
Регистрация: 18.05.2018
Сообщений: 170

Поворот изображения при клике на ссылку
Доброго времени суток!
На сайте есть кнопка, при клике на которую раскрывается содержимое.
<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) произвести переворот стрелки. Спасибо.
Изображения:
Тип файла: jpg Стрелка вниз.jpg (1.2 Кб, 24 просмотров)
Тип файла: jpg Стрелка вверх.jpg (1.3 Кб, 23 просмотров)
Ответить с цитированием