Hide and show list on click?

Question

JavaScript

Good day to all. The problem is the following: there are 4 blocks, each block has its own list. You need to display a list of the block that was clicked. When the list is open, and if we clicked outside of it, the list closes, the selection of the active block subsides.
What I want to do:
1. If we click again on the n block that has a list open, the list will be hidden (just like when clicking outside the list).
2. Now the lists of each block are opened, i.e. if you click on the 1st block, the list will open, if you click on the 2nd block, the list of the 2nd block will open, but the first one will not close, etc. I would like that when you click on another block, the list hides the previous one and the selection of the active one goes to the current block, on which the last one was clicked.
Here is a small example with source code.
jsfiddle.net/yf404ndz/3

Answer 1

jsfiddle.net/yf404ndz/8