I'm struggling to remember how to make a specific div use jQuery slideDown
on a click event.
This is the code I have been working with:
$('.content--link').on('click', function(e) {
$(this).next('.content').slideToggle();
e.preventDefault();
});
body {
padding: 20px;
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="group">
<div class="link">
<a class="content--link" href="#">Click this 1</a>
</div>
<div class="content">
<p>This is the content to show for 1</p>
</div>
</div>
<div class="group">
<div class="link">
<a class="content--link" href="#">Click this 2</a>
</div>
<div class="content">
<p>This is the content to show for 2</p>
</div>
</div>
I've done this in the past, but it seems like something isn't quite right this time. I might need to use .parents
to traverse up and then back down. It's definitely been a challenging day.