slideToggleを使用している間、他のすべてのdivをスライドバックする方法はありますか？

Question

私はブートストラップを使用してポートフォリオサイトを構築しています。私は自分のポートフォリオの画像の下にプロジェクトの詳細を追加する必要があります。イメージをクリックすると上下に切り替わりますが、別のイメージをクリックすると最初のdivが表示されたままになります。ユーザーがslideToggleで別のイメージをクリックしたときに、他のすべての表示可能な「プロジェクト詳細」divをスライドバックする方法を教えてください。

$('div.project-detail').hide(); 
 

 
$('img.doug').click(function() { 
 
    $('#dougDet').slideToggle(); 
 
}); 
 

 
$('img.ambe').click(function() { 
 
    $('#ambeDet').slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="workBlock" class="portfolio-block fixed-bg dark-bg"> 
 
    <div class="row"> 
 
    <img src="assets/portfolio/doug-fir-logo-for-instagran.jpg" alt="Doug Fir Digital Logo" class="portfolio-half doug"> 
 
    <img src="assets/portfolio/AmbeCreations-logo.jpg" alt="Ambe creations logo" class="portfolio-half ambe"> 
 
    </div> 
 
    <div class="project-detail" id="dougDet"> 
 
    <p>doug</p> 
 
    <p>doug</p> 
 
    <p>doug</p> 
 
    <p>doug</p> 
 
    <p>doug</p> 
 
    </div> 
 
    <div class="project-detail" id="ambeDet"> 
 
    <p>ambe</p> 
 
    <p>ambe</p> 
 
    <p>ambe</p> 
 
    <p>ambe</p> 
 
    <p>ambe</p> 
 
    </div> 
 
</div>

Answer 1

あなたが他の.project-detail要素にslideUp()を呼び出し、対象の1を切り替えることにより、必要なものを達成することができます。

$('img.portfolio-half').click(function() { 
 
    var $target = $($(this).data('target')).slideToggle(); 
 
    $('.project-detail').not($target).slideUp(); 
 
});

div.project-detail { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="workBlock" class="portfolio-block fixed-bg dark-bg"> 
 
    <div class="row"> 
 
    <img src="assets/portfolio/doug-fir-logo-for-instagran.jpg" alt="Doug Fir Digital Logo" class="portfolio-half doug" data-target="#dougDet"> 
 
    <img src="assets/portfolio/AmbeCreations-logo.jpg" alt="Ambe creations logo" class="portfolio-half ambe" data-target="#ambeDet"> 
 
    </div> 
 
    <div class="project-detail" id="dougDet"> 
 
    <p>doug</p> 
 
    <p>doug</p> 
 
    <p>doug</p> 
 
    <p>doug</p> 
 
    <p>doug</p> 
 
    </div> 
 
    <div class="project-detail" id="ambeDet"> 
 
    <p>ambe</p> 
 
    <p>ambe</p> 
 
    <p>ambe</p> 
 
    <p>ambe</p> 
 
    <p>ambe</p> 
 
    </div> 
 
</div>

：

はまた、あなたは、このようなものをすべて.portfolio-half要素上の単一のイベントハンドラを使用して、それらを区別するためにdata-*属性を使用してコードを乾燥させることができることに注意してください

また、JSのロード時のFOUCを避けるために、.project-detail要素の隠蔽をCSSに移動しました。