jQueryでクリックした箇所のみ要素を隠す・出現させる方法

クリックしたら行に詳細なコンテンツ、別の行をクリックしたら元に戻すにはどうすればいいのかわからなくて困ったので知見をシェアします。
$('.data__item'). でdivタグのクラス要素を指定し、findでhtml中のclassを見つけ、.cssで display: none or block を書き換えています。
$(this)でクリックした部分のみ書き換えを行っています。

hide_show.php

<div class="data__item">
    <div class="js-contents-show" style="display: none;">出現</div>
</div>
<div class="data__item">
    <div class="js-contents-hide" style="display: block;">隠す</div>
</div>
<script>
$(function() {
    $('.data__item').on('click', function() {
    $('.data__item').find('.js-contents-show').css('display','none');  
    });
    $('.data__item').on('click', function() {
    $(this).find('.js-contents-show').css('display','block');  
    });
    $('.data__item').on('click', function() {
    $('.data__item').find('.js-contents-hide').css('display','block');  
    });
    $('.data__item').on('click', function() {
    $(this).find('.js-contents-hide').css('display','none');  
    });
});
</script>