Форум

silatal · #1 (**permalink**) 22.11.2018, 04:13

Здравствуйте.
У меня есть вот такие маленькие треугольники:

При нажатии на треугольник, должен появляться текст, а треугольник изменяться:

У меня есть код, где текст появлятся и исчезает, а вот с треугольником уже засада: или они все изменяются, или только в одну сторону изменяются, а на место не возвращаются.

Подскажите, как дописать?

jQuery('.spoiler_links' ).click( function () {
			jQuery( this ).parent().children('.spoiler_body').hide();

			return false;
		} );

<style>
.spoiler_body {
	display: none;
}
</style>

<a href="" class="spoiler_links"><img src="/img/img_hide.png" class="company_hide"></a>

<div class="spoiler_body">Текст</div>
}

laimas · #2 (**permalink**) 22.11.2018, 07:22

Вообще удобнее щелкать по шапке блока и анимаровать его элемент. Почитайте о CSS анимации.

<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.toggle span {
    display: inline-block;
    transition: all 0.1s linear 0s;
}

.toggle.active span {
    transform: rotate(90deg);
}
</style>
<script>
$(function() {
    $('.toggle').click(function() {
        $(this).toggleClass('active')
    });
})
</script>
</head>
<body>
<a class="toggle">Toggle <span>►</span></a>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript