I am facing an issue with two columns on my website - the left column has a background image while the right one contains text. The right column also has a button that reveals more text when clicked. However, after clicking the button, the image in the left column does not resize and leaves white space at the bottom. How can I ensure that the left column's image always fills the full height?
Code provided below:
$(document).ready(function() {
$("#show_hide").click(function () {
$("#toggle_tst").toggle()
});
});.left {
width:50%;
float:left;
background:grey;
height:100vh;
background-image:url(https://coolbackgrounds.io/images/backgrounds/index/sea-edge-79ab30e2.png);
}
.right {
width:50%;
float:right;
min-height: 100vh;
}
#toggle_tst {
display:none;
}
.more {
height: 500px;
display: block;
clear:both;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="left">
</div>
<div class="right">
Some text here
<button id="show_hide">Show/Hide div</button>
<div id="toggle_tst">
The div element with some text.
Additional Lorem Ipsum content...
</div>
</div>
<div class="more">
Another section would go here
</div>