title: Change Text of <summary> Element On Click
body: <p>I would like to select a <code>&lt;details&gt;</code> element and click an item in the dropdown. After I click the item in the dropdown, I would like the text value of this item to replace the text in the <code>&lt;summary&gt;</code> element.</p>
  <p>So, the <code>&lt;summary&gt;</code> loads with the page and displays &quot;Select Topic&quot;. Then, a user clicks on the arrow and selects &quot;1&quot;. After clicking, the <code>&lt;summary&gt;</code> displays &quot;1&quot; instead of &quot;Select Topic&quot;. Here is a JSFiddle of the code so far, but I'm stuck on getting the text to replace the original <code>&lt;summary&gt;</code> text:</p>
  <p>JSFiddle: <a href="https://jsfiddle.net/3mh4cdvf/5/" rel="nofollow noreferrer">https://jsfiddle.net/3mh4cdvf/5/</a></p>
  <p>HTML:</p>
  <pre><code>&lt;details id=&quot;tesing2&quot;&gt;&lt;summary&gt;Select Topic&lt;/summary&gt;
  &lt;div class=div-class style=&quot;cursor: pointer;&quot;&gt;1&lt;/div&gt;
  &lt;div class=div-class style=&quot;cursor: pointer;&quot;&gt;2&lt;/div&gt;
  &lt;/details&gt;
  </code></pre>
  <p>jQuery:</p>
  <pre><code>$('.div-class').click(function (event) {
  setTimeout(function() {
  var topic = event.target.innerText;
  $(summary).innerHTML = topic;
  }, 20);
  });
  </code></pre>
  <p>Any help is greatly appreciated.</p>