How to close the block that appears by clicking on it?

Question

css

Good evening. There is such a code https://jsfiddle.net/enb8g6n8/12/ Its essence is to show or hide the block nicely and smoothly. Everything works as it should, with the exception of one moment:
1. How to close the block, when clicking on it, while maintaining the fadeOut animation?
2. I need to make 9 such blocks. Is there any more beautiful and shortened solution?

Answer 1

To switch the state of an element, use .fadeToggle()
Well, depending on the layout, you do If the hidden block comes after "Click me" Example

Answer 2

$( ".logistics" ).click(function() {
  if ( $( "#box" ).is( ":hidden" ) ) {
    $( "#box" ).fadeIn(1000);
  
  }
});

$( "#box" ).click(function() {
    $( "#box" ).fadeOut(1000);
});

Answer 3

2. I need to make 9 such blocks. Is there any more beautiful and shortened solution?

Something like