Show more/less toggle doesn't show everything

Question

I have this code below that consist of 2 list Total Fruits and Random Fruits and i'm able to move the values from one list to another and vice versa. The problem is after i add all the fruits from Random fruits to Total fruits and click the show more button it is not able to show the full list.

I'm not really sure what is causing this problem any help / suggestion would be greatly appreciated thanks!

 var redpill = {}; var greenpill = {}; var randompill = {}; var key = "Red Fruits"; redpill[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew']; var key2 = "Green Fruits"; greenpill[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew']; var key3 = "Random Fruits"; randompill[key3] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew']; function redraw() { var combineString = ''; $.each(redpill[key], function(index) { combineString += ('<div class="pilldiv redpill class">' + redpill[key][index] + '</div>'); }); $('.combineclass').html(combineString); $.each(greenpill[key2], function(index) { combineString += ('<div class="pilldiv greenpill class">' + greenpill[key2][index] + '</div>'); }); $('.combineclass').html(combineString); var randomString = ''; $.each(randompill[key3], function(index) { randomString += ('<div class="pilldiv randompill class">' + randompill[key3][index] + '</div>'); }); $('.randomclass').html(randomString); } function listener() { $(document).ready(function() { $(document).on("click", "#suggestid div", function() { data = this.innerHTML; $(".total_count_Green_Fruits").html(key2 + ': ' + greenpill[key2].length); var element = $(this).detach(); $('#currentid').prepend('<div class="new-green-fruit pilldiv class ">' + element.html() + '</div>'); }); }); $('body').on('click', 'div.new-green-fruit', function() { data2 = this.innerHTML; $(this).detach(); var element2 = $(this).detach(); $('#suggestid').prepend('<div class="pilldiv randompill class" >' + element2.html() + '</div>'); }); } redraw(); listener(); var slideHeight = 100; $(".container").each(function() { var $this = $(this); var $wrap = $this.children(".wrapper"); var defHeight = $wrap.height(); if (defHeight >= slideHeight) { var $readMore = $this.find(".read-more"); $wrap.css("height", slideHeight + "px"); $readMore.append("<a href='#'>Show More</a>"); $readMore.children("a").bind("click", function(event) { var curHeight = $wrap.height(); if (curHeight == slideHeight) { $wrap.animate({ height: defHeight }, "normal"); $(this).text("Show Less"); $wrap.children(".gradient").fadeOut(); } else { $wrap.animate({ height: slideHeight }, "normal"); $(this).text("Show More"); $wrap.children(".gradient").fadeIn(); } return false; }); } }); 

 .pilldiv { padding: 8px 15px; text-align: center; font-size: 15px; border-radius: 25px; color: Black; margin: 2px; } .randompill:after { content: "\\002B"; float: left; width: 16px; } .new-green-fruit:after { content: "\\292B"; float: left; width: 16px; } .redpill { background-color: Pink; cursor: default; } .greenpill { background-color: SpringGreen; cursor: default; } .randompill { background-color: LightBlue; cursor: pointer; } .class { font-family: Open Sans; } .center { display: flex; justify-content: center; } .wrappingflexbox { display: flex; flex-wrap: wrap; justify-content: center; } .top { margin-bottom: 20px } h3 { font-weight: normal; } .panel { display: table; height: 100%; width: 85%; background-color: white; border: 1px solid black; margin-left: auto; margin-right: auto; } .new-green-fruit { background-color: LightBlue; cursor: pointer; } .top { margin-bottom: 30px; } #leftpanel { float: left; width: calc(50% - 5px); background-color: #f2f2f2; " } #rightpanel { float: right; width: calc(50% - 5px); background-color: #f2f2f2; " } .container { width: 100%; } .wrapper { position: relative; overflow: hidden; padding: 10px; } .gradient { width: 100%; height: 35px; background: url(http://spoonfedproject.com/wp-content/uploads/demo/jquer-slide/images/bg-gradient.png) repeat-x; position: absolute; bottom: 0; left: 0; } .read-more { background: #fff; color: #333; padding: 5px; } .read-more a { padding-right: 22px; font-weight: 700; text-decoration: none; } .read-more a:hover { color: #000; } 

 <!DOCTYPE html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="//#" /> </head> <body> <div class="container"> <div class="wrapper"> <div id=leftpanel> <h3 class="class center">Total Fruits</h3> <div id="currentid" class="combineclass wrappingflexbox top"></div> <div class="gradient"> </div> </div> <div id="rightpanel"> <h3 class="class center">Random Fruits</h3> <div id="suggestid" class="randomclass wrappingflexbox top"></div> <div class="gradient"> </div> </div> </div> <div class="read-more"> </div> </div> </body> </html> 

Answer 1

I believe this problem is happening because are setting fixed heights onto your panels with an overflow hidden. Try setting overflow: scroll on your wrapper class as shown in the snippet below.

EDIT:

It actually seems to perform better when you completely remove overflow from wrapper

 var redpill = {}; var greenpill = {}; var randompill = {}; var key = "Red Fruits"; redpill[key] = ['Apple', 'Cherry', 'Strawberry', 'Pomegranate', 'Rassberry', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew']; var key2 = "Green Fruits"; greenpill[key2] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew']; var key3 = "Random Fruits"; randompill[key3] = ['Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew', 'Watermelon', 'Durian', 'Avacado', 'Lime', 'Honeydew']; function redraw() { var combineString = ''; $.each(redpill[key], function(index) { combineString += ('<div class="pilldiv redpill class">' + redpill[key][index] + '</div>'); }); $('.combineclass').html(combineString); $.each(greenpill[key2], function(index) { combineString += ('<div class="pilldiv greenpill class">' + greenpill[key2][index] + '</div>'); }); $('.combineclass').html(combineString); var randomString = ''; $.each(randompill[key3], function(index) { randomString += ('<div class="pilldiv randompill class">' + randompill[key3][index] + '</div>'); }); $('.randomclass').html(randomString); } function listener() { $(document).ready(function() { $(document).on("click", "#suggestid div", function() { data = this.innerHTML; $(".total_count_Green_Fruits").html(key2 + ': ' + greenpill[key2].length); var element = $(this).detach(); $('#currentid').prepend('<div class="new-green-fruit pilldiv class ">' + element.html() + '</div>'); }); }); $('body').on('click', 'div.new-green-fruit', function() { data2 = this.innerHTML; $(this).detach(); var element2 = $(this).detach(); $('#suggestid').prepend('<div class="pilldiv randompill class" >' + element2.html() + '</div>'); }); } redraw(); listener(); var slideHeight = 100; $(".container").each(function() { var $this = $(this); var $wrap = $this.children(".wrapper"); var defHeight = $wrap.height(); if (defHeight >= slideHeight) { var $readMore = $this.find(".read-more"); $wrap.css("height", slideHeight + "px"); $readMore.append("<a href='#'>Show More</a>"); $readMore.children("a").bind("click", function(event) { var curHeight = $wrap.height(); if (curHeight == slideHeight) { $wrap.animate({ height: defHeight }, "normal"); $(this).text("Show Less"); $wrap.children(".gradient").fadeOut(); } else { $wrap.animate({ height: slideHeight }, "normal"); $(this).text("Show More"); $wrap.children(".gradient").fadeIn(); } return false; }); } }); 

 .pilldiv { padding: 8px 15px; text-align: center; font-size: 15px; border-radius: 25px; color: Black; margin: 2px; } .randompill:after { content: "\\002B"; float: left; width: 16px; } .new-green-fruit:after { content: "\\292B"; float: left; width: 16px; } .redpill { background-color: Pink; cursor: default; } .greenpill { background-color: SpringGreen; cursor: default; } .randompill { background-color: LightBlue; cursor: pointer; } .class { font-family: Open Sans; } .center { display: flex; justify-content: center; } .wrappingflexbox { display: flex; flex-wrap: wrap; justify-content: center; } .top { margin-bottom: 20px } h3 { font-weight: normal; } .panel { display: table; height: 100%; width: 85%; background-color: white; border: 1px solid black; margin-left: auto; margin-right: auto; } .new-green-fruit { background-color: LightBlue; cursor: pointer; } .top { margin-bottom: 30px; } #leftpanel { float: left; width: calc(50% - 5px); background-color: #f2f2f2; " } #rightpanel { float: right; width: calc(50% - 5px); background-color: #f2f2f2; " } .container { width: 100%; } .wrapper { position: relative; overflow: scroll; padding: 10px; } .gradient { width: 100%; height: 35px; background: url(http://spoonfedproject.com/wp-content/uploads/demo/jquer-slide/images/bg-gradient.png) repeat-x; position: absolute; bottom: 0; left: 0; } .read-more { background: #fff; color: #333; padding: 5px; } .read-more a { padding-right: 22px; font-weight: 700; text-decoration: none; } .read-more a:hover { color: #000; } 

 <!DOCTYPE html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="//#" /> </head> <body> <div class="container"> <div class="wrapper"> <div id=leftpanel> <h3 class="class center">Total Fruits</h3> <div id="currentid" class="combineclass wrappingflexbox top"></div> <div class="gradient"> </div> </div> <div id="rightpanel"> <h3 class="class center">Random Fruits</h3> <div id="suggestid" class="randomclass wrappingflexbox top"></div> <div class="gradient"> </div> </div> </div> <div class="read-more"> </div> </div> </body> </html>