Question

I have created an employee spotlight webpart on our SharePoint site that randomly selects an employee with each page load. In the spotlight section is bio on the employee that is pulled from their ‘about me’ section of the User Information List. I am attempting to make it so the bio is expandable so that a few lines of the bio are intially visible and then the user can click a ‘more’ link to expand the text out to read the rest. What I have works but I have it jumping down to a fixed height where I would prefer it only expand down to amount of text with in the <div>

The div section:

<div id=\"expandable\" >" + Employees[randId].aboutMe +
                "</div><a href=\"javascript:Tog()\">more...</a>

The style:

#expandable { height:55px; overflow:hidden; }

A simple script to expand:

function Tog() {
    var expandable = document.getElementById('expandable');
    if (expandable.style.height == '400px') {
        expandable.style.height = '55px';
    }
    else {
        expandable.style.height = '400px';
    } 
}

Is there a better way to expand out the content and while still having some of the text show when collapsed?

Answer 1

Instead of setting the height to a fixed value, just set it to auto, and the div will expand to fit the content:

function Tog() {
    var expandable = document.getElementById('expandable');
    if (expandable.style.height) {
        expandable.style.height = '';
    } else {
        expandable.style.height = 'auto';
    } 
}

(Demo at jsfiddle.net).

UPDATE: Also consider replacing your inline JS (href="javascript:Tog()") with a proper event listener, as suggested by Bergi.