Hello everyone, I'm new. I need help to modify code

Hello everyone, I'm new. I need help to modify code

The problem that I need help: when I click "button 1" (this shows "Content 1") after click on "button 2"(not hidden "content 1")

Is there any way
 to fix this please?

Demo: http://jsfiddle.net/EhJfn/32/

  1. //button 1:
  2. $(function() {
  3.     $('#button1').click(function(event) {
  4.         $(this).toggleClass('f_btn1');
  5.         event.stopPropagation();
  6.         $('#content1').slideToggle();
  7.     });
  8.     $(document).click(function(event) {   
  9.         if ($(event.target).closest('#content1').length == 0) {
  10.             $('#content1').slideUp();
  11.             $('#button1').removeClass('f_btn1');
  12.         }
  13.     });
  14. });
  15. //button 2:
  16. $(function() {
  17.     $('#button2').click(function(event) {
  18.         $(this).toggleClass('f_btn2');
  19.         event.stopPropagation();
  20.         $('#content2').slideToggle();
  21.     });
  22.     $(document).click(function(event) {   
  23.         if ($(event.target).closest('#content2').length == 0) {
  24.             $('#content2').slideUp();
  25.             $('#button2').removeClass('f_btn2');
  26.         }
  27.     });
  28. });