CODEWITHSUNDEEP
javascriptjqueryhtmlcsslayout
DanielTA
DanielTA

Reputation: 6558

Make a slide down textarea in HTML

I want to make an HTML table with a lot of text input areas (textarea) that, when clicked on, expand downwards. Right now, when the textarea element gets clicked it expands fine, but it messes up the table layout in the process.

I want something like this enter image description here

Instead of this ugly thing I'm getting now enter image description here

Here is my current code

Upvotes: 3

Views: 1188

Answers (4)

Bura Chuhadar
Bura Chuhadar

Reputation: 3751

This is the same solution with some animation: http://jsfiddle.net/8Qa3C/2/

$(document).ready(function() {
    $('[id^="txt"]').focus(function() {
        $(this).addClass('expand').animate({
            height: "150px"});
    });
    $('[id^="txt"]').blur(function() {
        $(this).removeClass('expand').css({
            height: "20px"});
    });
});

Or you can also use transitions: http://jsfiddle.net/yU7ME/1/

$(document).ready(function() {
    $('[id^="txt"]').focus(function() {
        $(this).addClass('expand');
    });
    $('[id^="txt"]').blur(function() {
        $(this).removeClass('expand');
        });
});
.expand {
    box-shadow: 3px 3px 5px 2px gray;
    height: 150px;
    position: absolute;
    top: 5px;
    z-index: 10;
    transition: height 0.5s;
}

Upvotes: 0

Aaks20
Aaks20

Reputation: 401

Try the following-

Javascript

$('[id^="txt"]').focusin(function() {
    $(this).addClass("expandtextarea");
});
$('[id^="txt"]').focusout(function() {
    $(this).removeClass("expandtextarea");
});

CSS

.expandtextarea{
    box-shadow: 3px 3px 5px 2px gray;
    height: 150px !important;
    position: absolute;
    margin-top: -12px;
}

Upvotes: 0

Travis J
Travis J

Reputation: 82337

jsFiddle Demo

You should use positioning to accomplish this. Using position:absolute will remove the textarea from the flow of the document and allow it to "pop out" as your animated gif shows.

In order to have the positioning line up, you will also want to set the td to be position:relative in order to adjust the textarea to align to the td padding. A zindex will help to set it above the content as well.

td > textarea:focus{
 position:absolute;
 top:5px;
 z-index:1;
}
td{
 position:relative;
}

For added effect, you can animate the height change

$(this).animate({height:"150px"});

Upvotes: 4

Florian Margaine
Florian Margaine

Reputation: 60835

Instead of manually messing with the CSS values, simply toggle a class. This allows you to easily play with absolute positioning without having messed-up JS. See demo here: http://jsfiddle.net/8Qa3C/1/

Instead of your current code, use that:

$(document).ready(function() {
    $('[id^="txt"]').focus(function() {
        $(this).addClass('expand');
    });
    $('[id^="txt"]').blur(function() {
        $(this).removeClass('expand');
    });
});

Then you can have some simple CSS like this:

.expand {
    box-shadow: 3px 3px 5px 2px gray;
    height: 150px;
    position: absolute;
    top: 5px;
    z-index: 10;
}

I also added a position: relative; to td.

Upvotes: 7

Related Questions