Expand a DIV only when content overflows?

Question

My concept: So i have a fixed height DIV that containts a variable amount of content. If the content overflows from the box, it is initially hidden (via CSS), but if you mouseover the box, it should expand to the height needed to display the content.

This is what I have so far to accomplish this: http://jsfiddle.net/CvhkM/649/

The problem is as you can see, the jquery fires on both of those example DIVs, where it really should only fire on the bottom div (with content that extends beyond the initial div height as defined via CSS).

Also it grows to a defined height (300px), is there a way to detect the exact height it should grow to?

UPDATE: SOLUTION FOUND--> IVE LEFT IT ON JSFIDDLE: http://jsfiddle.net/hQkFH/3/

I've found the solution! Thanks everyone for helping out, here is the solution for everyone who might need it in the future: — Mark, Jun 12 '11 at 13:46
If you found the solution, write and accept an answer. Don't post it as edits/comments to the question. — Lightness Races in Orbit, Jun 12 '11 at 15:28

Codo · Answer 1 · 2011-06-12T14:19:47.927

You could use two classes. One is for the collapsed state:

div.collapsed {
    height: 50px;
    overflow: hidden;
}

The other one is for the expanded state:

div.expanded {
    min-height: 50px;
}

If you move the mouse pointer over the DIV, removed the collapsed class and add the expanded class.

The trick is to remove the explicitly set height and use min-height: It will nicely expand the long text but have no effect on the short text. That way you don't need to make a distinction between the cases with and without overflow.

score 0 · Answer 2 · answered Jun 12 '11 at 12:08

0

the approach I would take to this would be to add or remove a class on Hover.

For example, if you set the dimension restrictions of the div in a class, and then remove the class on Hover, I think this would work better.

answered Jun 12 '11 at 12:08

Paul Nelligan

2,015
2
18
18

Do you know how I could determine if the div is overflowing and subsequently decide to trigger a css class change or animation? – Mark Jun 12 '11 at 12:32

score 0 · Answer 3 · edited May 23 '17 at 12:04

0

Look at this example and the question to see if your script is useful for editing and expanding the "div" if necessary.

Example 1

Example 2

Question

edited May 23 '17 at 12:04

Community

1
1

answered Jun 12 '11 at 12:45

andres descalzo

14,887
13
64
115

Thank you very much! It has helped a little bit, can you look at my code so far and see what you think? http://jsfiddle.net/hQkFH/2/ – Mark Jun 12 '11 at 13:38
The problem is that I need to determine the height to open the box to (meaning the height of the box if nothing was hidden) – Mark Jun 12 '11 at 13:38

Expand a DIV only when content overflows?

3 Answers3