Как сделать сворачивающийся и разворачивающийся блок?

Question

[Dizzol]

Здравствуйте, на сайте есть такое меню:

<div class="nav-link">
<a href="#">Фильмы</a>
<div class="dropdown">
<ul>
<li><a href="#">Все фильмы</a></li>
<li><a href="#">Арт-хаус</a></li>
<li><a href="#">Боевики</a></li>
</ul>
</div>
</div>
<div class="nav-link">
<a href="#">Сериалы</a>
<div class="dropdown">
<ul>
<li><a href="#">Все фильмы</a></li>
<li><a href="#">Арт-хаус</a></li>
<li><a href="#">Боевики</a></li>
</ul>
</div>
</div>

Помогите написать скрипт, который бы по клику к примеру на "Фильмы" разворачивал .dropdown и при последующем клике опять на "Фильмы" сворачивал. Но чтобы еще при клике на любую область сайта, он тоже сворачивался бы.

Answer 1

[Денис Инешин]

Такие скрипты называются "аккордеон", их полно, например:
https://vctrfrnndz.github.io/jquery-accordion/

Comments

[Dizzol]

Дак без последнего пункта, можно написать и не большой скрипт, таких в интернете море. Мне нужно именно, чтобы открытый .dropdown сворачивался при клике на любую точку в сайте.

usefulscript.ru/forum/showthread.php?tid=199

Вот то что мне нужно, но есть проблема, он скрывает только 1-й ul, а у меня их больше 2.

Answer 2

[Максим Люмен]

CodePen конечно кривожопо сделал но для примера пойдёт