Slidedown要素とスライドアップその他

Question

このような件名がたくさんあることは知っていますが、正解は見つかりませんでした。

ドキュメントが読み込まれたら、すべてのブロックを閉じてください（slideUp）。

ユーザーがブロックをクリックすると、テキストは他のブロックを開いて兄弟を滑り落ちます（開いた場合は他のブロックを閉じます）。

私はこれを持っているが、それは2つのブロックだけで働いている：それでは、どのように可能性が

(function($) { 
     $(document).ready(function() { 
      $('.blocks-concours').click(function() { 
       var currentContent = $(this).siblings('.text-slide'); 
       $('.text-slide').not(currentContent).slideUp(); 
       currentContent.slideToggle().sibling($('.text-slide')); 
      }); 
     }); 
    })(jQuery); 

はまた、私は私のtext-slide

にdisplay: noneを持っている：

<div class="col-xs-12 wrap-blocks-concours"> 
      <div class="col-xs-12 blocks-concours"> 

       <div class="col-xs-8"> 
        <img src="#" alt="Nicolas et Mathieu"> 
       </div> 

       <div class="bandeau-nom-concours"> 
        <h3 class="uppercase">Nicolas et Mathieu</h3> 
       </div> 

       <div class="col-xs-4 text-block selected"> 
        <h5 class="uppercase">Content</h5> 
       </div> 
      </div> 

      <div class="col-xs-12 text-slide"> 
       <h3>Content</h3> 
      </div> 
     </div> 

そして、私のjQuery私はこれをできるだけ簡単にしていますか？

Answer 1

あなたはとても近かったです！ siblingsの代わりにsiblingを使用しました。私は何もしていないので、その部分を削除しました。

$(document).ready(function() { 
 
    $('.blocks-concours').click(function() { 
 
     var currentContent = $(this).siblings('.text-slide'); 
 
     $('.text-slide').not(currentContent).slideUp(); 
 
     currentContent.slideToggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-xs-12 wrap-blocks-concours"> 
 
      <div class="col-xs-12 blocks-concours"> 
 

 
       <div class="col-xs-8"> 
 
        <img src="#" alt="Nicolas et Mathieu"> 
 
       </div> 
 

 
       <div class="bandeau-nom-concours"> 
 
        <h3 class="uppercase">Nicolas et Mathieu</h3> 
 
       </div> 
 

 
       <div class="col-xs-4 text-block selected"> 
 
        <h5 class="uppercase">Content</h5> 
 
       </div> 
 
      </div> 
 

 
      <div class="col-xs-12 text-slide"> 
 
       <h3>Content</h3> 
 
      </div> 
 
     </div>