Объектно-ориентированная реализация связи dom-элемента и javascript-объекта

[scv]

Столкнулся со следующей проблемой: нужно разработать механизм сворачивания. При клике на ссылке показывается или скрывается блок с контентом. Реализация должна быть объектно-ориентированная, требуется написать класс es6+ или функцию конструктор ~es5, инкапсулирующий в себе работу с dom элементами и событиями. Пример разметки:
<div class="simple-collapse">
<a href="#" class="collapse-control">Control</a>
<div class="collapse-content"></div>
</div>
<script type="text/javascript">
var obSimpleCollapse = new SimpleCollapse(".simple-collapse");
obSimpleCollapse.init();
</script>

[рони]

scv,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[destus]

<div class="simple-collapse">
    <a href="#" class="collapse-control">Control</a>
    <div class="collapse-content" hidden>Content</div>
  </div>
  
  <script>
    
    class SimpleCollapse {
      
      constructor(selector) {
        this.elem = document.querySelector(selector);
      }
      
      init() {
        this.elem.querySelector('a').onclick = this.toggleContent.bind(this);
      }
      
      toggleContent() {
        this.elem.querySelector('.collapse-content').hidden = !this.elem.querySelector('.collapse-content').hidden
      }
      
    }
    
    var obSimpleCollapse = new SimpleCollapse(".simple-collapse"); 
    obSimpleCollapse.init();
    
  </script>

[Lipon]

Выше человек написал решение... babel для экспорта модуля вам в помощь...
Для скрытия элемента:

document.getElementById("myP").style.visibility = "hidden";
Или
document.getElementById("myP1").style.display = "none";

Подробнее https://www.w3schools.com/jsref/prop...visibility.asp