jQuery使用“show more”按钮和html表

Question

我有一个html表，每个单元格的末尾都是“显示更多”按钮。

如果单击“显示更多”按钮，则新行应显示隐藏内容。

我的问题是，如果您单击“显示更多”按钮，隐藏的内容将显示在同一单元格下方，而不是左侧。

现在的情况如下：

这应该是这样的：

Jquery的：

<script type="text/javascript">
$(document).ready(function() {
$(".productDescription").hide();
$(".show_hide").show();
$(".hide_show").hide();

$('.show_hide').click(function() {
$(this).parent().find('.productDescription').slide Toggle();
$(this).parent().find(".show_hide").hide();
$(this).parent().find(".hide_show").show();

$(".productDescription").hide();
});

$('.hide_show').click(function() {
$(this).parent().find('.productDescription').slide Toggle();
$(this).parent().find(".show_hide").show();
$(this).parent().find(".hide_show").hide();

$(".productDescription").hide();

});

});
</script>

HTML：

<div class="table">
    <div class="row header">
        <div class="cell1">test</div>
        <div class="cell1">test</div>
        <div class="cell1">Test</div>
        <div class="cell1">test</div>
        <div class="cell1">test</div>
        <div class="cell1">test</div>
        <div class="cell1"></div>
    </div>


    <div class="row">
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">
            <a href="#" class="show_hide" id="1">Show More</a>
            <a href="#" class="hide_show" id="1">Hide</a>
            <div class="productDescription" id="1">This Content will show up</div>
        </div>
    </div>

    <div class="row">
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">
            <a href="#" class="show_hide" id="2">Show More</a>
            <a href="#" class="hide_show" id="2">Hide</a>
            <div class="productDescription" id="2">This Content will show up</div>
        </div>
    </div>

    <div class="row">
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">Testentry</div>
        <div class="cell">
            <a href="#" class="show_hide" id="3">Show More</a>
            <a href="#" class="hide_show" id="3">Hide</a>
            <div class="productDescription" id="3">This Content will show up</div>
        </div>
    </div>

</div>

CSS：

.table {
  margin: 0 0 40px 0;
  width: 100%;

 border-left:1px solid #dfdfdf;
 border-right:1px solid #dfdfdf;
  display: table;
}
@media screen and (max-width: 580px) {
  .table {
    display: block;
  }
}

.row {
  display: table-row;
 background: #f6f6f6;

}

.row:nth-of-type(odd) {
  background: #ededed;
}
.row.header {
line-height: 25px;
  font-weight: 900;
  color: #ffffff;
  background: #566680;
  height:38px;
  margin-top:5px;
}
@media screen and (max-width: 580px) {
  .row {
    padding: 8px 0;
    display: block;

  }
}

.cell {
  padding: 6px 12px;
  display: table-cell;
   border-bottom:1px solid #dfdfdf;
   color:#566680;
   height:24px;
   line-height:25px;
}
@media screen and (max-width: 580px) {
  .cell {
    padding: 2px 12px;
    display: block;

  }
}

.cell1 {
  padding: 6px 12px;
  display: table-cell;
}
@media screen and (max-width: 580px) {
  .cell1 {
    padding: 2px 12px;
    display: block;

  }
}

}

有可能做到这一点吗？