Javascript-форум - Плавное появление блоков при нажатии на один из них на чистом JS

Необходимо сделать, что бы при выборе варианта "Ссылка 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>