jQuery using show more button and html table

Question

I have a html table and at the end of each cell is a "show more" Button.

If you click on the "Show more" Button, a new row should come up with the hidden content.

My problem is, that if you click on the "Show More" Button, the hidden content will show up right under the same cell, instead of the left side.

This is how it is now: 

This is how it should be: 

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;

  }
}

}

Any possibilities to do this?

Answer 1

function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}