Question

I have a div using the following class:

div.textStatement
{
    height: 70px;
    overflow: hidden;
}

When the user clicks a link (‘Show More’), the div expands to show more text and the ‘overflow’ should get set to ‘scroll’ so that the user can read all the text, in the event there is more text than the height of the div will show. However, the reference to the ‘overflow’ property of the div is coming back ‘undefined’ so that I can’t set it to ‘scroll.’ Any idea why the ref to the div’s overflow is coming back ‘undefined’? I think that would fix the problem (and make the scrollbars show up).

Here’s the div:

<asp:Panel ID="textStatement" class="textStatement" runat="server"></asp:Panel>
<label id="candidateStatementShowMoreLess" class="MoreLess" onclick="ShowMoreLess(this)">Show More</label>

Here’s the javascript (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");

                // ***** This should be setting the overflow to scroll on the div, but isn't, as "attr" is coming back undefined. *****
                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");

                // ***** This could have the same problem as above, but when the user collapses the div. *****
                section.attr("overflow", "hidden");
            });

        if (sectionId == "textStatement")
        {
            IsStatementExpanded = false;
        }
        else if (sectionId == "textDescription")
        {
            IsDescriptionExpanded = false;
        }
    }
}

Answer 1

section.attr("overflow", "scroll");

is incorrect. It needs to be

section.css("overflow", "scroll");