Добрый день! Прошу помощи в реализации цели:
Есть код HTML:
.closed a {
display: none;
}
.opened a {
display: block;
}
<div id="toggle" class="list closed">
<div class="titlediv">Показать список</div>
<a href="http://site.ru/href1" class="linkclass1">Link 1</a>
<a href="http://site.ru/href2" class="linkclass2">Link 2</a>
</div>
Необходимо:
1) При клике по элементу class="titlediv" изменить класс элемента id="toggle" с class="list closed" на class="list opened".
2) Если у элемента id="toggle" установлен класс class="list opened" то:
-
a) при клике по элементу class="titlediv" изменить класс элемента id="toggle" с class="list opened" на class="list closed"
-
b) при клике вне области элемента class="list opened" изменить его класс с class="list opened" на class="list closed"
3) По возможности: открытие/скрытие элемента при изменении класса происходит плавно
4) Всё это должно работать на стационарных компъютерах, планшетах, телефонах.
Заранее спасибо!