title: How can I create an accordion using OOJS
body: <p>I'm trying to create a function that allows you to click on an item in a group of items, and collapse and expand the height of the specific item that was clicked. However, currently, whatever item is clicked, expands and collapses all of them. I'm not sure what the best approach is.</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  
  &lt;div class="myDiv" data-state="open" id="1"&gt;&lt;/div&gt;
  &lt;div class="myDiv" data-state="open" id="2"&gt;&lt;/div&gt;
  &lt;div class="myDiv" data-state="open" id="3"&gt;&lt;/div&gt;
  &lt;div class="myDiv" data-state="open" id="4"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>`</p>
  
  <pre><code>class Height {
    constructor(el) {
      this.element = el;
    }
  
    get state(){
      return $(this.element).attr('data-state');
    }
  
    set _state(newState){
      $(this.element).attr('data-state',newState);
    }
  
    expand() {
      $(this.element).css('height', '200px');
      this._state = 'open';
    }
  
    collapse() {
      $(this.element).css('height', '50px');
      this._state = 'close';
    }
  
    toggle(){
       if(this.state == 'open') {
          this.collapse();
      } else if(this.state == 'close') {
          this.expand();
      }
    }
  }
  var myDiv = $('.myDiv');
  
  var myDivInstance = new Height(myDiv);
  
  $('body').on('click', function() {
    myDivInstance.toggle();
  });
  </code></pre>