Using Javascript to show and hide a message

Question

I installed a small script to show and hide the div.

$('.message-head').click(function () {
    $('.message-preview').toggle('slow');
});

Works fine as it should. My problem is that I have several instances of html markup on a page that is inside the foreach loop.

<div class="two-three-col message-head">
    <h4>@message.Subject</h4>
    <div class="message-preview">
        @Html.Raw(@message.Body)
    </div>
</div>

This is mainly for a messaging system that has been shredded and heavily modified, and I was given a fix; not being the best in javascript, I am completely stuck. So, how can I change js so that if I click on message 1, then only message 1 will show / hide on click, and the rest will remain inactive.

Thank you in advance

Answer 1

this , . DOM, .message-preview. :

$('.message-head').click(function () {
    $(this).find('.message-preview').toggle('slow');
});