指定のクラスが存在する場合、ある要素を表示させたい（jQuery）

Question

初歩的な質問で申し訳ありません。

例えばですが、指定のtitle1にopenクラスがついた場合、.contents1を表示させるといった動作を行いたいのですが、contents1が表示されません。

タイトル1をクリックするとコンテンツ1が開き、タイトル2をクリックするとコンテンツ２が開く、
またコンテンツ１が開いた状態でタイトル２をクリックするとコンテンツ１が閉じ、コンテンツ２が開く（逆も同様）
という動作です。

記述がおかしなことになっているかもしれません...
助言をいただけますと幸いです。
よろしくお願いいたします。

<div class="title title1">タイトル1</div>
<div class="title title2">タイトル2</div>
<div class="contents contents1">コンテンツ1</div>
<div class="contents contents2">コンテンツ2</div>

$('.title').click(function(){
    $(this).toggleClass("open");
    $('.title').not($(this)).removeClass("open");
  });

if($('.title1').hasClass('open')){
        $('.contents1').fadeToggle(500)
    }

---

ご回答いただきありがとうございました。大変参考になりました。
Lhankor_Mhyさんの回答で解決したため、ベストアンサーとさせていただきました。

Answer 1

$(function(){
  $('.contents').hide();
  $('.title').on('click',function(){
    $(this).toggleClass('open');
    $('.title').not($(this)).removeClass('open');
    $('.contents1').toggle($('.title1').hasClass('open'));
    $('.contents2').toggle($('.title2').hasClass('open'));
  });
});

Answer 2

$('.title').click(function(){
    $(this).toggleClass("open");
    $('.title').not($(this)).removeClass("open");
    // クリックしたときに動作させたいのでクリックイベントの中に入れる。
    if($('.title1').hasClass('open')){  
        $('.contents1').fadeToggle(500) // ドットの付け忘れ
    }
});