var size_full = '200px'; var size_default = '100px'; var search_text_focus = 'input any keyword'; var search_text_default = 'search'; jQuery('.searchinput').focus(function() { jQuery('.search-option').fadeToggle(250,"swing"); jQuery(this).animate({ width: size_full },400); jQuery(this).attr("placeholder",search_text_focus); }); jQuery('.close-btn').click(function() { jQuery('.search-option').fadeToggle(250,"swing"); jQuery('.searchinput').animate({ width: size_default },500); jQuery('.searchinput').attr("placeholder",search_text_default); }); jQuery('.searchinput').attr("placeholder",search_text_default);
<div class="searchbox"> <input type="text" placeholder="" class="searchinput"><input type="submit" value="GO!" class="searchsubmit"> <div class="search-option"> <a href="javascript:void(0);" class="close-btn">[x]close</a> <h3>search option</h3> <input type="checkbox" id="option1"><label for="option1">option1</label> <input type="checkbox" id="option2"><label for="option2">option2</label> </div> </div> <div class="section"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In feugiat erat eu enim feugiat id ultricies sem auctor. Nam convallis orci sed nunc vestibulum volutpat vehicula nibh aliquet. Donec nec enim in neque lobortis aliquam sit amet nec ligula. Aenean magna quam, pulvinar at vulputate ac, tempus at dui. In ullamcorper, diam nec porttitor iaculis, enim turpis mollis turpis, in fringilla mi tellus quis orci. Donec lacus purus, egestas at placerat vel, pharetra et dui. Nulla felis urna, semper nec varius a, consequat eu enim. Proin consectetur, lectus vel lobortis tincidunt, urna nisi pulvinar mi, sed ultricies tellus tellus eget tellus. Donec mi nunc, auctor ut cursus quis, ultricies sed ipsum. Fusce ipsum velit, fermentum id feugiat eu, volutpat at lorem. Ut ullamcorper commodo nunc id condimentum. Duis massa diam, bibendum vitae fermentum id, tincidunt vitae felis. Nam non justo libero, quis eleifend tortor. Vivamus laoreet quam id dolor lacinia in sagittis odio aliquam. </div>
body { padding:15px; color:#333; } a { text-decoration:none; color:#666; } a:hover { text-decoration:underline; } .searchbox { width:300px; margin:auto; position:relative; text-align:right; } .searchinput { width:100px; } .searchsubmit { width:45px; margin:3px 5px; } .search-option { text-align:left; width:200px; border:3px solid #00bfff; background:rgba(169,226,243,0.9); padding:5px; position:absolute; right:55px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; display:none; } .close-btn { font-size:12px; position:absolute; right:3px; top:3px; }