I looked up many questions on this topic and there are similar answers that should work, but it's not working for me. I admit DOM traversal is not my strong point, so if you have a solution and can give some context it would really help me understand why the other solutions weren't working.
I have a div with a button and on a button click (this button only appears on mobile) it should slide down only the current div content. I can get this to work, but the issue is it opens up ALL the divs content. I cannot however get it to only open the specific card even using solutions such as $(this), $(next), $(prev) or $(find).
The code I am posting below does not open it at all, and I am using this version of the code because it is most similar to answers on Stack Overflow.
$(document).ready(function(){
$('.mobile-icon').on('click', function(){
event.preventDefault();
$(this).next().find('.card-bottom').slideToggle();
console.log('hi there'); //this does print
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FIRST CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<a href="#" class="mobile-icon"> <span class="glyphicon glyphicon-plus"></span> </a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
<!-- SECOND CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<a href="#" class="mobile-icon"> <span class="glyphicon glyphicon-plus"></span> </a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->The main issue is how you're using jQuery's .next() and .find(). Since $(this) is the <a> tag, .next(), which selects the next sibling, is the <p> tag. Then calling .find() on the <p> tag would check through all its descendants, for which there are none.
Therefore you need to select the parent of both the 'card-top' and 'card-bottom' divs before you traverse down with .find().
For example:
$(document).ready(function(){
$('.mobile-icon').on('click', function(event){
event.preventDefault();
$(this).parent().parent().find('.card-bottom').slideToggle();
});
});
The first call to .parent() will be the parent of the <a> tag, which is the 'card-top' div, and the .parent() of that will be the 'card' div. Then calling .find() will work.