javascript - Toggle div on div click horizontally -

i made div has background image of face, have designed div contains paragraph, 2 buttons , input box.

i know question has been asked quite situation different, i'd div background image of face clickable div containing else slides out left.

what best method this?

html

<div id="image"></div> <div id="container">  <p>i nutella , croissants</p>  <input id="message" placeholder="type...." required="required" autofocus>   <button type="button" id="send">send</button>  <button type="button" id="close">close</button>  </div> 

css

div#image { background: url(http://i.imgur.com/pf2qpyl.png) no-repeat; } 

jquery

    $(document).ready(function(){ $( "#image" ).click(function() {     jquery(this).find("#container").toggle(); }); }); 

using article link posted raimov (which came across in google search before realize posted ;), can use jquery animate width when toggling element clicked. remember background not add size element, toggle background image must have height attribute set. also, if have long lines of text in form, you'll have wrap them or use method article.

http://jsfiddle.net/iansan5653/wp23wrem/ demo, , here code:

$(document).ready(function () {     $("#image").click(function () {         $("#container").animate({width: 'toggle'});     }); }); 

and css necessary:

div#image {     background: url(http://i.imgur.com/pf2qpyl.png) no-repeat;     height: 36px;     /*height needed show div (default width 100%)*/ }  #container {     white-space: nowrap;     overflow: hidden; }