title: Collapsing the others divs in the same parent on click
body: <p>I have the follow:</p>
  
  <pre><code>&lt;div class="select-plan-container"&gt;
  
  &lt;div class="select-plan-column"&gt;
    &lt;div class="select-plan-buy select-plan-buy-starter"&gt;
    &lt;/div&gt;
    &lt;div class="select-plan-buy select-plan-details-starter"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="select-plan-column"&gt;
    &lt;div class="select-plan-buy select-plan-buy-level"&gt;
    &lt;/div&gt;
    &lt;div class="select-plan-details select-plan-details-level"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="select-plan-column"&gt;
    &lt;div class="select-plan-buy select-plan-buy-levels"&gt;
    &lt;/div&gt;
    &lt;div class="select-plan-details select-plan-details-levels"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>jQuery(document).ready(function(){
    jQuery(".select-plan-buy-starter").click(function() {
      jQuery(".select-plan-details-starter").slideToggle();
    });
  
    jQuery(".select-plan-buy-level").click(function() {
      jQuery(".select-plan-details-level").slideToggle();
    });
  
    jQuery(".select-plan-buy-levels").click(function() {
      jQuery(".select-plan-details-levels").slideToggle();
    });
  
    jQuery('.select-plan-details-levels input[type=checkbox]').on('change', function (e) {
      if (jQuery('.select-plan-details-levels input[type=checkbox]:checked').length &gt; 3) {
        jQuery(this).prop('checked', false);
      }
    });
  });
  </code></pre>
  
  <p>Every time the user clicks on <code>.select-plan-buy</code> the parent div expands. Right now you can expand all the divs one by one. How to collapse the others <code>.select-plan-column</code> when clicking on a <code>.select-plan-buy</code>?</p>