Question

I have a piece of code here that is repeated multiple times in a single html file.

<div class="message">
   <label id="slideDown"> Read </label>
   <p id="messageBody" class="hidden"> Body </p>
</div>
<div class="message">
   <label id="slideDown"> Read </label>
   <p id="messageBody" class="hidden"> Body </p>
</div>

jQuery used to slide down messageBody.

$('#slideDown').click(function() {
  $('#messageBody').slideToggle('slow');
});

My questions is how can I get it so that when I click on the label Read for one message, it only slides down the messageBody that is within its div?

Answer 1

You are using the ids slideDown and messageBody multiple times, while ids have to be unique. What happens when you use ids more than once doesn’t have to make any sense at all, as your document is just malformed.

Anyway, the way to fix this would be change the ids to be unique. One way would be like this:

<div class="message">
   <label id="slideDown1"> Read </label>
   <p id="messageBody1" class="hidden"> Body </p>
</div>
<div class="message">
   <label id="slideDown2"> Read </label>
   <p id="messageBody2" class="hidden"> Body </p>
</div>

js:

$('#slideDown1').click(function() {
  $('#messageBody1').slideToggle('slow');
});
$('#slideDown2').click(function() {
  $('#messageBody2').slideToggle('slow');
});