猎聘网搜索按钮一点换位置如何实现这个效果

猎聘网搜索按钮一点换位置怎么实现这个效果

第一个图片

我 想要实现 快捷搜索时候，搜索按钮在文本框的右边，一点击高级搜索时候，搜索按钮出现在下面，上面搜索按钮空出的部位，文本框填充，这个怎么实现，不要隐藏的效果。 跪求大神指导
------解决思路----------------------

引用:

能说详细一点吗？ 怎么通过AJAX 控制啊！@chnxiaoxiao

按钮ID ：search
预备显示层ID：show

比如
 定义点击事件
$("#search").click(function(){
$.get('输出回调的ashx或aspx文件名', function(data) {
  $('#show').html(data);  //这是回调结果 拼接的文本输出到这里

//这里做一些改变样式的事，搜索框，搜索按钮 请自己用JQ写


});
});

你回调的ashx或aspx接受到请求后
stringbuilder sb=new stringbuilder();
sb.appendformat()   //这里一段段的拼接字符串  把你那个层的代码全拼出来  具体stringbuilder用法请另查

response.write(sb.tostring());//把结果回传 OK
------解决思路----------------------

------解决思路----------------------
其中一种实现方式：两个按钮，普通高级搜索时显示上面那个搜索按钮，点击后模拟点击下面那个搜索(当然你要考虑用户填写过高级搜索的内容然后又回到使用普通搜索怎么处理)；高级搜索时显示下面的内容后把上面的搜索隐藏起来。
方法很多，主要看怎么易于在你原来代码的基础上实现与维护