Slidedown 요소 및 슬라이드 기타

Question

나는 이와 같은 주제가 많다는 것을 알고 있지만 정답을 찾지 못했습니다.

문서가로드되면 모든 블록을 닫고 싶습니다 (slideUp).

사용자가 블록을 클릭하면 다른 사람들이 블록을 열어 형제가 아래로 내립니다 (열면 다른 블록이 닫힙니다).

나는이있다, 그러나 그것은 단지 두 개의 블록으로 일하고 :

<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와 : 또한

(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은이 어떻게이 수 가능한 한 간단하게이 작업을 수행합니까?

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>

의