Display div below clickable link

Question

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 1

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

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

Answer 2

Yes, using classes.

 $(function () { $(".note").hide(); $(".noteLink").click(function () { $(this).next().slideToggle(); }); }); 

 a {cursor: pointer; display: block;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> 

Answer 3

.clickables{
    border:1px solid #999999;
}
.deepclickables{
    margin:5px;
    border:1px dotted #999999;
}

---

<div class="clickables">
    <span onClick="javascript:clickables()">Clickables</span>
    <div id="clicka" class="deepclickables">
    </div>
</div>
<script>
function clickables(){
    document.getElementById('clicka').innerHTML = "Yo yo yo"
}
</script>

or

function clickable(){
    document.getElementById('clickable').innerHTML = "content";
}
Use onClick to call it

<div id="click" onClick="javascript:clickable();">Click me!</div>

Answer 4

Using .next() would be the ideal solution. But if you are able to wrap your .note and .noteLink into a label tag with a checkbox, you may not need javescript to do this trick. Here is an example:

 input, .note { display: none; } label, input:checked ~ div { display:block; } 

 <label> <input type=checkbox> <a class="noteLink">Note Name</a> <div class="note">Full Note Details</div> </label> <label> <input type=checkbox> <a class="noteLink">Note Name</a> <div class="note">Full Note Details</div> </label> <label> <input type=checkbox> <a class="noteLink">Note Name</a> <div class="note">Full Note Details</div> </label>