CODEWITHSUNDEEP
javascripthtmlcssoverflow
user479870
user479870

Reputation:

dynamically expand element with hidden overflow

I've got an element with overflow: hidden, which I'd like to expand when clicked.

This is what I have so far.

http://jsfiddle.net/up6bW/2/

It does expand the element, but not as it's supposed to. It should not push the element below it, but overlap and hide it. I can make this work partially by using position: absolute, but this makes the next element collapse to the top.

Can this be done by only using CSS on the clicked element? Other elements should not be adjusted.
Or if they are, this should be calculated automatically using JavaScript.

Upvotes: 1

Views: 1384

Answers (4)

user479870
user479870

Reputation:

I'm using this solution, which automatically adds padding to the next element.

http://jsfiddle.net/up6bW/47/

HTML

<div class="a" onclick="z(this)">click here click here click here</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div class="a" onclick="z(this)">click here click here click here</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div class="a" onclick="z(this)">click here click here click here</div>

CSS

div {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 20px;
    width: 150px;
    word-break: break-all;
}

div.a {
    color: tomato;
    cursor: pointer;
    height: 20px;
    overflow: hidden;
}

JavaScript

function z (a) {

    // nextElementSibling equivalent
    var b = a.nextSibling;
    while (b && b.nodeType != 1)
        b = b.nextSibling;

    if (b)
        b.style.cssText = b.style.paddingTop ? "" : "padding-top: " + a.clientHeight + "px";

    a.style.cssText = a.style.border ? "" : "\
        background: #fff;\
        border: 1px solid #ccc;\
        height: auto;\
        margin-left: -5px;\
        margin-top: -5px;\
        padding: 4px;\
        position: absolute;\
        ";

};

Upvotes: 0

ntgCleaner
ntgCleaner

Reputation: 5985

Here's an example of what you might need: http://jsfiddle.net/up6bW/39/

All I did was make the position:absolute on your dropdown Div and then gave the first of the other divs a padding on top to compensate for the loss of space from the absolute positioning:

First you can change your second div a bit to add a class:

<div class="a" onclick="z(this)">click here click here click here click here click here</div>
<div class="second">1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>

​ Then change the CSS to something like this:

body {
    margin: 10px;
}

div {
    width: 150px;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 10px;
    word-break: break-all;
}

div.a {
    cursor: pointer;
    color: tomato;
    height: 20px;
    overflow: hidden;
    position:absolute;
}
.second{
    padding:25px 0px 0px 0px;       
}​

The div you want to expand will have absolute positioning then the second div will have enough padding to make up for that first div.

Upvotes: 1

Sean
Sean

Reputation: 6499

Another solution could also involve wrapping the div in a container like so:

HTML:

<div class="container">
    <div class="a" onclick="z(this)">
        click here click here click here click here click here
    </div>
</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>
<div>1234567890</div>

CSS:

body { margin: 10px; }

div { font-family: sans-serif; font-size: 16px; line-height: 20px; margin-bottom: 10px; width: 150px; word-break: break-all; }

div.a { color: tomato; cursor: pointer; height: 20px; overflow: hidden; }
.container { height: 20px; overflow: visible; }

JS:

function z (a) {
    a.style.cssText = a.style.border ? "" : "\
        background: #fff;\
        border: 1px solid #ccc;\
        height: auto;\
        margin-left: -5px;\
        margin-top: -5px;\
        padding: 4px;\
        position: absolute;\
        ";
};

DEMO HERE

Obviously adding HTML elements for presentational reasons is less than ideal, but I think it's better than a JavaScript alternative.

Tested in IE7+, Chrome, and Firefox

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

Placing elements on top of each other requires absolute positioning. You can put some padding-top on the first element to compensate for the positioning of the overlap.

Upvotes: 0

Related Questions