My task involves loading multiple lines of text in each div box within a category listing. To display only three lines upon loading, I have limited the height and added overflow:hidden; CSS. A small button (displaying image loaded in div) positioned next to each box is meant for adjusting the height accordingly. However, this feature seems to be malfunctioning. Below are the relevant code snippets:
HTML (one of the boxes on the page):
<div class="content" style="height:50px;overflow:hidden;">
<div>Category 1</div>
<div>Category 2</div>
<div>Category 3</div>
<div>Category 4</div>
<div>Category 5</div>
<div>Category 6</div>
</div>
<div class="see-more"></div>
jQuery:
jQuery(document).ready(function() {
jQuery(".see-more").click(function() {
jQuery(this).prev("div.content").height(200);
});
});
The jQuery code appears to be encountering issues. Additionally, I am seeking guidance on determining the actual height of hidden content (due to overflow) in order to set an accurate height value for the box rather than using a static 200.