Кто может подсказать как решить задачу:
Есть несколько div-блоков с одинаковыми классами. нужно чтобы по клику срабатывал только блок в котором происходит клик.
Вот пример:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="block-x">
<a class="trigger">Hide/Show News</a>
<div class="aaa" style="">
Закрыть
</div>
<div class="bbb" style="display: none;">
Открыть
</div>
</div>
<div class="block-x">
<a class="trigger">Hide/Show News</a>
<div class="aaa" style="">
Закрыть
</div>
<div class="bbb" style="display: none;">
Открыть
</div>
</div>
<div class="block-x">
<a class="trigger">Hide/Show News</a>
<div class="aaa" style="">
Закрыть
</div>
<div class="bbb" style="display: none;">
Открыть
</div>
</div>
<div class="block-x">
<a class="trigger">Hide/Show News</a>
<div class="aaa" style="">
Закрыть
</div>
<div class="bbb" style="display: none;">
Открыть
</div>
</div>
<script>
$('.trigger').click(function() {
$('.aaa').toggle();
$('.bbb').toggle();
});
</script>
<style>
.block-x {
display: inline-block;
}
a.trigger {
display: block;
text-align: center;
cursor: grab;
}
.bbb {
display: block;
width: 100px;
height: 100px;
margin: 20px;
padding: 20px;
background: #39efef;
}
.aaa {
display: block;
width: 100px;
height: 100px;
margin: 20px;
padding: 20px;
background: #39ef58;
}
</style>
</body></html>