JQUERY同级点击显示问题？

[testerAPP]

<div class="box">
     <div class="cate-title">一级分类1-1</div>
     <div class="item-list">
          <div class="cate-two">二级分类1-1</div>
          <div class="cate-three">
               <a href="#">三级分类1-1</a>
               <a href="#">三级分类1-n</a>
          </div>
           <div class="cate-two">二级分类1-n</div>
          <div class="cate-three">
               <a href="#">三级分类1-2-1</a>
               <a href="#">三级分类1-2-n</a>
          </div>
     </div>
     <div class="cate-title">一级分类2-1</div>
     <div class="item-list">
          <div class="cate-two">二级分类2-1</div>
          <div class="cate-three">
               <a href="#">三级分类2-1</a>
               <a href="#">三级分类2-n</a>
          </div>
           <div class="cate-two">二级分类2-n</div>
          <div class="cate-three">
               <a href="#">三级分类2-2-1</a>
               <a href="#">三级分类2-2-n</a>
          </div>
     </div>
</div>

HTML结构如上，默认显示1级和二级分类，三级分类隐藏，点击二级分类显示对应也就是cate-two下面的cate-three三级分类给CLASS加上show，如果再点击隐藏，点击下一个二级分类同理，请问，如何使点击下一个二级分类也就是一级分类2-1里的二级分类显示三级分类的同时隐藏上一个二级分类1-1下的三级分类呢？

为了便于理解，下面附GIF动图

[天际的海浪]

$(function(){
	$(".box").on("click", ".cate-two", function(event){
		var target = $(this).next(".cate-three");
		target.toggle();
		$(".box .cate-three").not(target).hide();
	});
});