How can I make it so that when I click on a box-one arrow, only the corresponding box-two slides open and not all of them? I have multiple boxes with the same class and currently clicking on one opens all of them. Can anyone provide a solution?
<div class="box-one">
<a href="#" class="arrow"></a>
</div>
<div class="box-two">
<p>Some text</p>
</div>
<div class="box-one">
<a href="#" class="arrow"></a>
</div>
<div class="box-two">
<p>Some text</p>
</div>
.box-two { display: none; }
$('.box-one a.arrow').on('click', function(e) {
e.preventDefault();
('.box-two').slideToggle(300);
});