Is there a way to expand a div based on the size of the content (which can vary)?

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?

Remove the height and overflow properties and it will expand to fit the content automatically. — sachleen, Aug 01 '12 at 19:13
unfortunatley no, what it does is put scroll bars on the top and right side. Which I don't want to happen. — Spacemancraig, Aug 01 '12 at 19:14
@Spacemancraig shouldn't happen unless you have other css setting its width and height with overflow:scroll a div is expandable in height by default. Or you got a parent div with a fixed height/width and overflow set. Post more code — Huangism, Aug 01 '12 at 19:16
Se the height to `auto`: `expandable.style.height = 'auto'`. — bfavaretto, Aug 01 '12 at 19:18
The inital height (amount of text) from the about me is fairly large and I want it collapsed smaller. That way if someone chooses to read more of the bio they can expand it out. — Spacemancraig, Aug 01 '12 at 19:18
@bfavaretto he doesn't need to set it, it is auto by default, just remove the height and overflow stuff and check the parent div — Huangism, Aug 01 '12 at 19:19
@Huangism Is it? His css is setting the `height` to `55px`, so `auto` would have to be forced. He seems to want it to be 55px initially, and change to auto only after some action. — bfavaretto, Aug 01 '12 at 19:20
@bfavaretto as the first commenter mentions, if he removes the height and overflow and not set it via js, it would be auto because it is the default — Huangism, Aug 01 '12 at 19:21
@bfavaretto That worked perfectly. If you would kindly put that in answer. I will gladly accept it. Thanks. — Spacemancraig, Aug 01 '12 at 19:22
That's not what the OP is looking for. Height needs to be fixed initially, and changed to auto only when "more" is clicked. — bfavaretto, Aug 01 '12 at 19:22
@bfavaretto yea nvm the title was a bit misleading and the first comment confused me as well — Huangism, Aug 01 '12 at 19:22
@Haungism, bfavaretto is right on target. I only want the collapsed `height` to by `55px` but when the more link is clicked, I want the `height` to expand out to reveal the full text. — Spacemancraig, Aug 01 '12 at 19:24
@Spacemancraig yea ignore my comments the title and first comment confused me, yea you just set it to auto on link click and it will work as you want — Huangism, Aug 01 '12 at 19:27

score 2 · Answer 1 · answered Aug 01 '12 at 19:22

Do not set a height so the whole content can show up, instead remove a class with a max-height/ overflow set.

HTML

<div id="content" class="collapsed">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
</div>

CSS

div#content{ border: 1px solid black; cursor: pointer;}

div.collapsed{
     max-height: 40px;
    overflow:hidden;
}

JavaScript

var cont = document.getElementById("content");
cont.onclick = function() {
    var newClass = (cont.className==="collapsed") ? "" : "collapsed";
    cont.className = newClass;        
};

The JavaScript is a basic example, better to use a add/remove class library so you can have more than one class.

Example

JSFiddle

bfavaretto · Accepted Answer · 2012-08-01T19:51:41.333

2

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.

edited Aug 01 '12 at 19:51

answered Aug 01 '12 at 19:23

bfavaretto

71,580
16
111
150

I'd set it to an empty value instead of `"55px"`, then the value from the style sheet would apply. But +1 for `auto` – Bergi Aug 01 '12 at 19:32
@Bergi, if I did that then when they clicked the more link again to collapse, would it still collapse back to `55px`? – Spacemancraig Aug 01 '12 at 19:49
@Bergi Nice, code (slightly) altered to do so. Kept the link to your fiddle at the end of the answer. – bfavaretto Aug 01 '12 at 19:52
Very nice to know. Though it does not appear to work in Internet Explorer 8 and unfortunately most of our employees are on a terminal server that runs only IE8. We are upgrading by the end of the year but for now I still have to use the inline JS. Thanks again guys! – Spacemancraig Aug 01 '12 at 20:18
1

@Spacemancraig IE8 and below require a slighly different syntax: `document.attachEvent('onclick', function(e) { /* ... */ })`. The cross-browser code usually does `if(document.addEventListener) { /* addEventListener code */ } else { /* attachEvent code */ }`. – bfavaretto Aug 01 '12 at 20:32

score 0 · Answer 3 · answered Aug 01 '12 at 19:22

Here's a working example of what I said in my comment. By default, the div takes up whatever space is required by its content. You restrict it to your dimensions by adding the short class to the element. The toggle function simply adds and removes this class.

HTML

<div id="expandable" class="short">Content here</div>
<a href="#" onclick="toggle()">more...</a>

CSS

.short {
  height: 200px;
  overflow: hidden;
}

JS

function toggle() {
  var elem = document.getElementById("expandable");

  if(hasClass(elem, "short"))
    removeClass(elem, "short");
  else
    elem.className = elem.className + " short";
}

//These functions from http://stackoverflow.com/a/2155755/219118
function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
  }
}

Is there a way to expand a div based on the size of the content (which can vary)?

3 Answers3