I have created a unique design where a div features a background image of a face, along with a paragraph, two buttons, and an input box inside it.
While I know this question has been asked before, my scenario is slightly different. I want the div with the face background image to be clickable, triggering a sliding animation from the left for the rest of the content within.
What would be the most effective approach to achieve this?
HTML
<div id="image"></div>
<div id="container">
<p>I enjoy indulging in nutella and 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();
});
});