Expanding and collapsing table rows

Question

Hi,

 

I am trying to expand and collapse rows on a button click however when I am clicking a button it is expanding and collapsing all the rows. Here is my code , I am new can anybody help.

@model IEnumerable<WebApplication2.Model.Logs>

@{

ViewBag.Title = "Index1";

var message1 = ViewBag.Message;

var records = ViewBag.records;

}

<h2 style="text-align: left">

View Logs

</h2>

<form method="post" class="form-horizontal">

<div class="row">

<div class="input-group ">

<text style="padding-left: 20px">Level:</text> @Html.DropDownList("levels", (SelectList)ViewBag.levels)

<text style="padding-left: 20px">DocumentID:</text><input type="text" data-dinamictable-type="string" data-dinamictable-column="0" data-formatter="true" data-formatter-remove="/[^A-Za-z0-9\s]/gi" data-formatter-length="30" data-formatter-upper="true" placeholder="Search here" name="documentId" class="input-control" new { style="width: 80px;margin-left: 8px" }>

<text style="padding-left: 20px">Message:</text><input type="text" data-dinamictable-type="string" data-dinamictable-column="0" data-formatter="true" data-formatter-remove="/[^A-Za-z0-9\s]/gi" data-formatter-length="30" data-formatter-upper="true" placeholder="Search here" name="message" class="input-control" new { style="width: 80px;margin-left: 8px" }>

<text style="padding-left: 20px">Records:</text> @Html.DropDownList("records", (SelectList)ViewBag.records)

<button class="btn btn-default" type="submit" new { style="margin-left: 20px">Search</button>

</div>

</div>

</form>

<div class="panel-body">

<div style="overflow: auto;">

<table class="table table-bordered table-striped table-responsive dinamictable">

<tr>

<th>

Log ID

</th>

<th>

Date Added

</th>

<th>

Level

</th>

<th>

Document ID

</th>

<th align="center">

Message

</th>

</tr>

@if (Model != null)

{

foreach (var item in Model)

{

<tr class="accordion-toggle" data-toggle="collapse" data-target="#collapseOne">

<td>

@Html.DisplayFor(modelItem => item.logId)

</td>

<td>

@Html.DisplayFor(modelItem => item.dateAdded)

</td>

<td>

@Html.DisplayFor(modelItem => item.level)

</td>

<td>

@Html.DisplayFor(modelItem => item.documentId)

</td>

<td>

@Html.DisplayFor(modelItem => item.message)

</td>

<td class="show">

<a href=" #"><img src="@Url.Content("~/Images/add.png")" height="30px" /></a>

</td>

</tr>

<tr>

<td colspan="5" class="AddNewRecord">

@Html.DisplayFor(modelItem => item.message3)

</td>

</tr>

}

}

</table>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<!-- Your Hiding Script -->

<script type='text/javascript'>

$(document).ready(function () {

$(".AddNewRecord").each(function () {

$(".AddNewRecord").hide();

});

});</script>

<script>$(function () {

$('.show').click(function () {

$('.AddNewRecord').toggle();

});

});</script>