I am facing an issue with a div that has the class specified below:
div.textStatement
{
height: 70px;
overflow: hidden;
}
My goal is to expand the div when a user clicks on a link labeled 'Show More'. This should reveal more text and set the 'overflow' property to 'scroll' so that all the text can be read. However, I am encountering an error where the reference to the 'overflow' property of the div is returning 'undefined'. This prevents me from setting it to 'scroll'. Do you have any insights into why this reference is undefined? I believe fixing this issue would make the scrollbars appear as intended.
Below is the HTML for the div:
<asp:Panel ID="textStatement" class="textStatement" runat="server"></asp:Panel>
<label id="candidateStatementShowMoreLess" class="MoreLess" onclick="ShowMoreLess(this)">Show More</label>
Here is the JavaScript code (using jQuery):
var IsStatementExpanded = false;
var IsDescriptionExpanded = false;
function ShowMoreLess(moreLessLink)
{
var section = $(moreLessLink).prev("div");
var sectionId = $(section).attr("id");
var collapsedHeight = 70;
var expandedHeight = 300;
if (section.height() == collapsedHeight)
{
section.animate({ height: expandedHeight }, 500,
function ()
{
$(moreLessLink).html("Show Less");
section.attr("overflow", "scroll");
});
if (sectionId == "textStatement")
{
IsStatementExpanded = true;
}
else if (sectionId == "textDescription")
{
IsDescriptionExpanded = true;
}
}
else
{
section.animate({ height: collapsedHeight }, 500,
function ()
{
$(moreLessLink).html("Show More");
section.attr("overflow", "hidden");
});
if (sectionId == "textStatement")
{
IsStatementExpanded = false;
}
else if (sectionId == "textDescription")
{
IsDescriptionExpanded = false;
}
}
}