toggle one div at the time with masonry

toggle one div at the time with masonry

Hello all looked up google, this forum but could not find a solution. Hope i can get some advice.
i have several divs. 
i'd like to only open one at the time.this is my html and i have several, up to ten such sections on my page. 

  1. <div class="detailList">

  3. <div class="detail intel">
  4. <div class="item-content"><p>Procesador: Intel® Atom™</p></div>
  5. </div>
  6. <div class="detail monitor">
  7. <div class="item-content"><p>Pantalla: 7"</p></div>
  8. </div>
  9. <div class="detail os">
  10. <div class="item-content"><p>Sistema operativo: Android* 4.4, KitKat</p></div>
  11. </div>
  12. <div class="detail memory">
  13. <div class="item-content"><p>Memoria RAM: 1 GB</p></div>
  14. </div>
  15. <div class="detail hd">
  16. <div class="item-content"><p>Almacenamiento: 16 GB eMMC</p></div>
  17. </div>

  19. </div> <!-- end detail list -->

This is  the js

  1. (function($){


  4. $( function() {

  6.  var $container = $('.detailList').masonry({
  7. columnWidth: 2
  8.  });

  10.  $container.on( 'click', '.item-content', function() {
  11. $( this ).parent('.detail').toggleClass('is-expanded');
  12. $container.masonry();
  13.  });
  14.   
  15. });

  17. })($.noConflict(true));
How could i make this work so that only one of the 'item-conent' divs opens at one time?

thank you 
D