JavaScript: Expand area on click

css, javascript, jquery, twitter-bootstrap

Solution

Add the following to your markup and styling and include the script.

HTML

    <button  class="btn btn-primary btn-toggle" type="button">Post</button>

CSS

.btn-toggle{
    display: none;    
}

Javascript

$("textarea").click(function(){
   $(".btn-toggle").slideDown();
});

$(document).click(function(e){
    e.stopPropagation();
    if($(e.target).parents(".well").length == 0){
        $(".btn-toggle").slideUp();
    }
});

This segment of Javascript binds click event handlers to the `textarea` and the `document`. The event handler bound to the `textarea` simply slides down the `button` to make it visible.

The event handler bound to the `document` is fired on every click on the page since the click events propagate up the `DOM` to the `document`. Once the `document` fires the event, the handler checks to see if the `target` (aka element clicked) has a parent inside the `well`. If it does we do not perform any actions since we do not want to hide the button when the user clicks inside the `textarea` or the `button` itself. If the click is outside of the well we call the `slideup` function on the button to hide it in a stylish manner.

Working Example: http://jsfiddle.net/MgcDU/6025/

Problem

What I'm trying to do is make it so that, when a user clicks in the textarea, it expands the div to show the 'Post' button. Here's a picture of what I mean: So, when the user clicks in the textbox area, I need the background div to expand and show the 'Post' button. Here's the JSFiddle I started: http://jsfiddle.net/MgcDU/6018/ HTML: ``` <div class="container"> <div class="well"> <textarea style="width:462px" placeholder="Comment..."></textarea> <button class="btn btn-primary" type="button">Post</button> <div class="clearfix"></div> </div> ``` CSS: ``` textarea { margin-bottom: 0; } .btn { float: right; margin-top: 12px; } .container { margin:20px 0 0 20px; } .well { width: 476px; padding: 12px; } ``` I have no JavaScript experience, but I think this is a simple enough project to look at when finished to be able to understand the basics.

Original source