BN83 BN83 - 2 months ago 9
CSS Question

Display div below clickable link

I have the following:

<a class="noteLink">Note Name</a>
<div class="note">Full Note Details</div>
<a class="noteLink">Note Name</a>
<div class="note">Full Note Details</div>
<a class="noteLink">Note Name</a>
<div class="note">Full Note Details</div>


Where all the "note" divs are hidden by default, I'd like to show the one that relates to the
button
that is clicked when it's clicked.

Is there an easier way than something like:

$('#UniqueNoteLink').click(function() {
$('#UniqueNoteID').toggle();
});


For each note?

Answer

If the element you want to toggle comes right after the clicked element, you could just use next()

$('.noteLink').click(function() {
    $(this).next().toggle();
});