jQuery using show more button and html table

0 votes

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: Now

This is how it should be: Goal

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?

May 27, 2022 in JQuery by Edureka
• 13,690 points
4,595 views

1 answer to this question.

0 votes
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";
  }
}
answered May 30, 2022 by gaurav
• 23,260 points

Related Questions In JQuery

0 votes
1 answer

How to make a simple modal pop up form using jquery and html?

Create A Modal <button onclick="document.getElementById('id01').style.display='block'" class="w3-button">Open Modal</button> ... <div ...READ MORE

answered Jun 2, 2022 in JQuery by Edureka
• 13,690 points
7,506 views
0 votes
1 answer

What is the difference between jQuery: text() and html() ?

Hello @kartik, The text() method entity-escapes any HTML that is ...READ MORE

answered Nov 25, 2020 in JQuery by Niroj
• 82,880 points
1,009 views
0 votes
1 answer

How to disable HTML links using jquery?

Hello @kartik, Got the fix in css. td.disabledAnchor a{ ...READ MORE

answered Nov 26, 2020 in JQuery by Niroj
• 82,880 points
2,401 views
0 votes
1 answer

How to Disabling and enabling a html input button?

Hello @kartik, Using jQuery Disabling a html button $('#Button').attr('disabled','disabled'); Enabling a ...READ MORE

answered Nov 26, 2020 in JQuery by Niroj
• 82,880 points
1,294 views
0 votes
1 answer

JQuery Difference between hide() and fadeOut() , show() and fadeIn()

Main difference between FadeIn, FadeOut vs hide, ...READ MORE

answered Jun 1, 2022 in JQuery by Edureka
• 13,690 points
419 views
0 votes
1 answer

How to perform a real time search and filter on a HTML table

How to use it: Add filters to your ...READ MORE

answered Jun 13, 2022 in JQuery by rajatha
• 7,680 points
3,395 views
0 votes
1 answer

Show/hide content with specific class using jquery

jQuery hide() Method The hide() method hides the ...READ MORE

answered Jun 13, 2022 in JQuery by rajatha
• 7,680 points
2,645 views
0 votes
1 answer

How to shorten repeating code with html function and return tags in jquery

Firstly note that replace() only accepts two arguments, the ...READ MORE

answered Jun 15, 2022 in JQuery by rajatha
• 7,680 points
839 views
0 votes
1 answer

How to get all css properties and events of a html element with jquery or other libraries?

You can get the computed value of ...READ MORE

answered Jun 14, 2022 in JQuery by gaurav
• 23,260 points
1,030 views
0 votes
1 answer

What is the difference between AJAX with JavaScript and jQuery?

JavaScript is a programming language. JQuery is ...READ MORE

answered May 30, 2022 in JQuery by gaurav
• 23,260 points
721 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP