JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sweets-menu" class="menu">
    <span class="title">Сладости</span>
    <ul>
      <li>Торт</li>
      <li>Пончик</li>
      <li>Пирожное</li>
      <li>Шоколадка</li>
      <li>Мороженое</li>
    </ul>
  </div>

CSS

.menu ul {
  display: none;
  margin: 0;
}

.menu .title {
  font-weight: bold;
  cursor: pointer;
}

.menu .title:before {
  content: '▶';
  padding-right: 6px;
  color: green;
}

.menu.open ul {
  display: block;
}

.menu.open .title:before {
  content: '▼';
}

JavaScript

var div = document.body.children[0];
//суть всего этого действа  втом, что бы в функцию как атрибут запихнуть элемент, и на выходе получить уже этот элемент с свойствами и событиями
function Menu(nun) { // в атибут идет elem: div, зачем?
  
  var elem = nun.elem;// по факту тут получается строка (var elem = (elem: div).elem т.е. var elem = elem.div.elem - это я не могу понять. Что записывается в "var elem =...."?

    elem.onclick = function() {
    elem.classList.toggle('open');
  };

}

// использование
Menu({
  elem: div //(1)почему тут модифицируемый элемент идет в атрибут функции как результат свойства? 
});