Toggle a specific panel inside datalist with jquery

Question

jquery:

function chngimg() {
        var img = document.getElementById('Arrow').src;
        if (img.indexOf('arrow-right.png') != -1) {
            document.getElementById('Arrow').src = 'Content/img/arrow-bottom.png';
        }
        else {
            document.getElementById('Arrow').src = 'Content/img/arrow-right.png';
        }

    }
    $(document).ready(function () {
        $(".solutionsCommentsPanel").hide();
        $(".linkButton").click(function () {
            $(".solutionsCommentsPanel").slideToggle(300);
            chngimg();
        });
    });

Datalist's Item Template:

                    <ItemTemplate>
                        <div class="solution">
                            <div class="row">
                                <div class="col-md-6">
                                    <h4><%# Eval("Title") %></h4>
                                </div>
                                <div class="col-md-2"><b>Simple</b></div>
                                <div class="col-md-2"><b><%# Eval("Likes") %> likes</b></div>
                                <div class="col-md-2">
                                    <asp:Button ID="btnReminder" runat="server" Text="Set Reminder"
                                        class="btn-primary" ToolTip="Set a reminder for this solution."
                                        Height="25px" />
                                </div>
                            </div>
                            <div>
                                <%# Eval("Description") %>
                            </div>
                            <div class="solution_footer">

                                <asp:LinkButton ID="btnComments" runat="server" OnClientClick="return false;"
                                    CssClass="linkButton">
                                    <img id="Arrow" alt=">>" 
                                        src="Content/img/arrow-right.png" />
                                    Comments | Actions
                                </asp:LinkButton>
                            </div>
                            <asp:Panel ID="panelCommentsActions" runat="server" CssClass="solutionsCommentsPanel">
                                Comments and Actions
                            </asp:Panel>
                        </div>
                    </ItemTemplate>

Problem is:

Since datalist has multiple data rows, so when I click on the linkButton of a particular datarow (say first), it slideToggles all the Panels in all the data rows. I just want that particular data row's panel to be toggeled..

Answer 1

You can try

$(".linkButton").click(function () {
    $(this)
    .closest('.solution_footer') // Find closest div
    .next(".solutionsCommentsPanel").slideToggle(300);
    chngimg($(this).find('img')); //assuming image will be rendered as a child
});

Also to change to image of specific arrow modify your function

function chngimg(img) {
    if (img.attr('src').indexOf('arrow-right.png') != -1) {
        img.attr('src', 'Content/img/arrow-bottom.png');
    } else {
        img.attr('src', 'Content/img/arrow-right.png');
    }
}