html的代码是:
<div class="zhukuang">
		<div id="liaotian">
			<div id="liaotianbt">聊天内容</div>
			<div id="liaotiank"></div>
		</div>
		<div id="zhaixian">
			<div id="zhaixianbt">在线网友</div>
			<div></div>
		</div>
		<div id="shuru">
			<div id="biaoqin">
			<span>内容输入框</span>
			<span id="bq">表情选择</span>
			<button class="zhaixianan">隐藏在线网友</button>
			</div>
			<div id="bqlb"></div>
			<div class="shuruk"><textarea id="shuruwb"></textarea></div>
			<div id="fashong"><button id="fashongj">发送</button><button>清空</button></div>
		</div>
	</div>
js的代码是:
	$(".zhaixianan").click(function(){
		$("#zhaixian").slideToggle("fast",function(){
			$("#liaotian").animate({width: "100%"});
			$("#shuru").animate({width: "100%"});
			$(".zhaixianan").html("显示在线网友");
		});
	});
css的代码是:
.zhukuang{
	border-radius: 20px;
	box-shadow:3px 5px rgba(0,0,0,.2);
	background-color: #FFF;
	padding: 0;
	width: 50%;
	height: 800px;
	margin: 20px auto;
	overflow: hidden;
}
#liaotian{
	background-color: #FFCCCC;
	 width: 80%;
	 height: 70%;
	 float: left;
}
#zhaixian{
	float: right;
	background-color: #99CCCC;
	width: 20%;
	height: 100%
}
#shuru{
	padding: 0;
	float: left;
	background-color: #FFCC99;
    width: 80%;
    height: 30%;
}
h2{
	display: block;
	text-align: center;
	font-weight: 900;
}
#biaoqin{
	text-indent:10px;
	width: 100%;
	height:30px;
	background-color: #0099CC;
	line-height:30px;
}
#liaotianbt{
	background-color: #0099CC;
	 width: 100%;
	 height: 30px;
	 text-indent:10px;
	 line-height:30px;
}
#zhaixianbt{
	margin: 20px auto;
	text-align: center;
}
#liaotiank{
	padding: 0;
	background-color: #FFCC99;
	 width: 100%;
	 height: 100%;
	 font-size: 24px;
}
.shuruk{
	overflow: hidden;
	background-color: #FFCC99;
	 width: 100%;
	 height: 75%;
	 padding: 0;
}
.shuruk textarea{
	width: 100%;
	height: 100%;
	resize:none;
	background-color: #FFCC99;
	font-size: 36px;
}
#fashong{
	text-align:right;
	width: 100%;
	height:30px;
	background-color: #0099CC;
}
#fashong button{
	margin: 1px 20px;
	width: 80px;
	height: 28px;
	border-radius: 5px;
	background-color: #0099CC;
}
#shuru .zhaixianan{
	width: 150px;
	height: 28px;
	float: right;
	padding: 0;
	margin: 1px 10px;
	border-radius: 5px;
	background-color: #0099CC;
}
#bq{
	color: #e74c3c;
	font-weight: 800;
}
#bqlb{
	display: none;
	float: left;
	width: 500px;
	height: 500px;
}

现在的问题是点击按钮能够按顺序隐藏和扩宽聊天框和输入框
就是不知道怎么再次点击相同按键按顺序返回网友在线框
自己写过一个判断但是没有效果不知道问题在哪?
	$(".zhaixianan").click(function(){
		if($("#liaotian").width()!="100%"){
			$("#zhaixian").slideUp("fast",function(){
				$("#liaotian").animate({width: "100%"});
				$("#shuru").animate({width: "100%"});
				$(".zhaixianan").html("显示在线网友");
			});
		}else{
				$("#liaotian").animate({width: "80%"});
				$("#shuru").animate({width: "80%"});
				$(".zhaixianan").html("隐藏在线网友");
				$("#zhaixian").slideDown();
		}