Как сделать закрытие появившегося блока, кликом по нему же?

Question

[Secret73]

Добрый вечер. Имеется вот такой код https://jsfiddle.net/enb8g6n8/12/ Суть его в том, что бы показывать или скрывать красиво и плавно блок. Все работает как нужно, за исключением одного момента:
1. Как сделать закрытие блока, при клике на него же, с сохранением анимации fadeOut?
2. Мне нужно сделать таких блоков 9 штук. Есть ли какое то более красивое и сокращенное решение?

Answer 1

[Павел Антонов]

Для переключения состояния элемента используете .fadeToggle()
Ну и в зависимости от верстки делаете
$(this).next( ".box" ).fadeToggle(1000);
Если скрываемый блок идет после "Кликни меня"
Пример

Comments

[Secret73]

Вроде бы то что нужно, спасибо!

Answer 2

[Андрей]

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

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

Comments

[Secret73]

Спасибо. Но теперь пропала возможность скрыть, нажав вне этого блока. А хотелось бы ее оставить

[Андрей]

Ну так оставьте

Answer 3

[Destell]

2. Мне нужно сделать таких блоков 9 штук. Есть ли какое то более красивое и сокращенное решение?

Что-то вроде