I am currently in the process of creating a drop-down menu button that, when clicked, reveals the previously hidden div underneath it.
The code is functioning properly without the use of $(this).next, but it is displaying all divs with the class .menudrop because there are multiple buttons and drop-downs on the page. My goal is to only modify the display of the next .menudrop after the .dropclick button has been pressed.
Check out the JsFiddle: https://jsfiddle.net/jeffd/nuen3735/1/
<div class='playbox'>
<div class='playbox2 playboxplayer player'>
<div class='play' key='respect.mp3' name='Respect' tag='tagtest'></div>
</div>
<div class='playbox2 playboxbpm bpm'>85 BPM</div>
<div class="playbox2 playboxname name">Respect</div>
<div class='playbox2 playboxkeywords keywords'>Slow, Smooth, RnB</div>
<div class='playbox2 playboxlength length'>02:12</div>
<div class='playbox2 playboxbuy buy'>
<div class='mp3buy droptrack' data-product-id='Respect' data-product-key='3c31060e1038c3fe3e9cb0f069d6f33b'>+</div>
</div>
<div class='menudrop'>(dropdown)</div>
</div>
$(".droptrack").on('click', function() {
$(this).next(".menudrop").slideToggle('display', function(i, v) {
return v == 'none' ? 'inline-block' : 'none'
});
});