how to toggle all divs when click the button

Question

needs to close (hide) all .body divs =? ( div.body{ display:none } ? )

needs to close (hide) all .body Open divs, when click on the .button

needs to open just closest .body div, Open when click on the .button

needs to change .button icon ( Negative or Positive Icon ) when click on the .button

HTML

<div class="box">

  <div class="header">

    <a href="#" class="button">

      <span class="fa positive"></span>

    </a>

  </div>

  <div class="body">

  </div>

</div>

JQUERY

jQuery('.button').on('click', function() {

  jQuery('.body').close();

  jQuery(this).closest(".body, .header").toggle(); // Edit 

  jQuery('span').toggleClass('negative');

  jQuery(this).parents().find('.body').toggle() // i test it, doesn't work

});

STYLE

.body {
  display:none;
}

.button .positive:before {
  content : "sample ( + )";
}

.button .negative:before {
  content : 'sample ( - )';
}

Answer 1

This would work:

$('.button').on('click', function() {
  $btn = $(this);
  $('.body').hide();
  $('.box .negative').removeClass('negative').addClass('positive');

  $btn.closest('.box').find('.body').toggle(); 
  $btn.find('span').toggleClass('negative');

});

.body {
  display:none;
}

.button .positive:before {
  content : "sample ( + )";
}

.button .negative:before {
  content : 'sample ( - )';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"> 
  <div class="header"> 
    <a href="#" class="button">
      <span class="fa positive"></span>
    </a>
  </div>
  <div class="body">
   some text
  </div>
</div>

<div class="box">
  <div class="header">
    <a href="#" class="button">
      <span class="fa positive"></span>
    </a>
  </div>
  <div class="body">
   some text
  </div>
</div>