CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Damien
Damien

Reputation: 621

Using Javascript to show and hide a message

I've set up a small script to show and hide a div.. 

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

Works perfectly as it should do. My problem is that I have multiple instances of the html markup on the page, which is inside a 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 basically for a messaging system that has been chopped and changed a lot and has been left to me to fix; not being the best at javascript I'm quite stuck. So how can I modify the js so that if I click on say message 1 then only message 1 will show/hide on click and the rest will stay inactive.

Thanks in advance

Upvotes: 4

Views: 1335

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You can use the this keyword to refer to the element which raised the event. From there you can traverse the DOM to find the related .message-preview element. Try this:

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

Upvotes: 10

Related Questions