jQueryのclickイベントで他の要素をクリックしたら今表示してる要素を隠したいです

Question

de-02がclickされた時にde-01が表示されてる場合に、de-02をclickしたら、de-02の表示とde-01を非表示のイベントを同時にやりたいです

<button id="de-01">01</button>

<button id="de-02">02</button>

           <div id="slide-01">
              <div class='single-item'>
                    <div>
                        <img src="show/img_170925_0007.jpg" width="100%">
                    </div>
                    <div>
                        <img src="show/img_170925_0002.jpg" width="100%">
                    </div>
                </div>

                <div class="inner-title">
                    <p>Category: design</p>
                    <p>2017.06</p>
                    <p>title: item</p>
                </div>
            </div>

            <div id="slide-02">
              <div class='single-item'>
                    <div>
                        <img src="show/img_170906_0533.jpg" width="50%">
                    </div>
                    <div>
                        <img src="show/img_170906_0535.jpg" width="100%">
                    </div>
                </div>
                <div class="inner-title">
                    <p>Category: design</p>
                    <p>2017.06</p>
                    <p>title: item</p>
                </div>
            </div>

#slide-01,#slide-02{
	display: none;
}

$('#de-01').click(function(e){
		if ($('#slide-01').css('display') === 'none'){
			$('#slide-01').show();
		} else{
			$('#slide-01').hide();
		};
	});

	$('#de-02').click(function(e){
		if ($('#slide-02').css('display') === 'none'){
			$('#slide-02').show();
		} else {
			$('#slide-02').hide();
		};
		e.stopPropagation();
	});

Answer 1

not()使ってみてください。

• jQuery .not()と:not()の色々な使い方

Answer 2

こういうことですか？

$(function(){
  $('#slide-01,#slide-02').hide();
  $('#de-01,#de-02').on('click',function(){
    $('[id^="slide"]:not(#slide'+$(this).attr('id').substr(-3)+')').hide();
    $('#slide'+$(this).attr('id').substr(-3)).toggle();
  })
});

<button id="de-01">01</button>
<button id="de-02">02</button>

<div id="slide-01">slide01</div>
<div id="slide-02">slide02</div>

Answer 3

私が以前やっていたのは以下のような方法です。
まず、非表示にするitemHideのような共通クラスをcssに用意します。

jQuery側では簡易版と複雑版で２種類の方法どちらでもいいかと思います。要件に合わせて使い分けですかね。

簡易版のtoggleClass()は要素があれば消してくれるし、なければ追加してくれる便利なクラスです。
ただ、初期値として表示対象ではないものにitemHideを指定しておく必要があります。

複雑版ではhasClass()という要素の有無を調べるクラスで制御をしています。
やっていることは簡易版と同じですが、兄弟クラスを同時に制御したり、いろいろと同時に制御するならこちらの方が出来るかなと思います。
明示的なので分かりやすく、イメージしやすいのもこちらかなと思います。

.itemHide{
    display: none;
}

// 簡易版　楽な方
$('#de-01').click(function(e){
    $(this).toggleClass("itemHide");
    $('#slide-02').toggleClass("itemHide");
});
$('#de-02').click(function(e){
    $(this).toggleClass("itemHide");
    $('#slide-01').toggleClass("itemHide");
});

// 複雑版　複雑な処理を入れる場合は以下の中で制御
$('#de-01').click(function(e){
    if (($(this).hasClass("itemHide")){
        $(this).removeClass("itemHide");
        $('#slide-02').addClass("itemHide");
    } else{
        $(this).addClass("itemHide");
        $('#slide-02').removeClass("itemHide");
    };
});
$('#de-02').click(function(e){
    if (($(this).hasClass("itemHide")){
        $(this).removeClass("itemHide");
        $('#slide-01').addClass("itemHide");
    } else{
        $(this).addClass("itemHide");
        $('#slide-01').removeClass("itemHide");
    };
});