Expand a DIV only when content overflows?

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.

T开发者_开发技巧his 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/

---

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.

---

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.

---

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