Необходимо сделать, что бы при выборе варианта "Ссылка 1" плавно появлялся "Содержимое для 1 ссылки", а при выборе варианта "Ссылка 2" плавно раскрывался "Содержимое для 2 ссылки", а "Содержимое для 1 ссылки" закрывался и соответственно наоборот и так для всех ссылок. У меня есть решение на Jquery. но мне нужно решение на чистом js без фреймворков.
<nav class="main-mnu">
<ul>
<li>
<a href="#">Ссылка 1<i class="mdi mdi-chevron-down f_right"></i></a>
<div class="dropdown-block">
Содержимое для 1 ссылки
</div>
</li>
<li>
<a href="#">Ссылка 2<i class="mdi mdi-chevron-down f_right"></i></a>
<div class="dropdown-block">
Содержимое для 2 ссылки
</div>
</li>
<li>
<a href="#">Ссылка 3<i class="mdi mdi-chevron-down f_right"></i></a>
<div class="dropdown-block">
Содержимое для 3 ссылки
</div>
</li>
<li>
<a href="#">Ссылка 4<i class="mdi mdi-chevron-down f_right"></i></a>
<div class="dropdown-block">
Содержимое для 4 ссылки
</div>
</li>
<li>
<a href="#">Ссылка 5<i class="mdi mdi-chevron-down f_right"></i></a>
<div class="dropdown-block">
Содержимое для 5 ссылки
</div>
</li>
<li>
<a href="#">Ссылка 6<i class="mdi mdi-chevron-down f_right"></i></a>
<div class="dropdown-block">
Содержимое для 6 ссылки
</div>
</li>
<li>
<a href="#">Ссылка 7<i class="mdi mdi-chevron-down f_right"></i></a>
<div class="dropdown-block">
Содержимое для 7 ссылки
</div>
</li>
</ul>
</nav>
<script>var $dropdowns = $('.dropdown-block');
var $anchors = $('.main-mnu a');
function resetMenu() {
$dropdowns.hide();
$anchors.removeClass('active');
}
$anchors.on('click',function(e){
var $link = $(this);
e.preventDefault();
resetMenu();
$link.siblings('.dropdown-block').show();
$link.addClass('active');
});
$(document).on('click', function(e){
var $target = $(e.target);
if(!$target.is($anchors) && !$target.is($dropdowns)) {
resetMenu();
}
});
$dropdowns.hide();</script>
