title: Truncate inline HTML for Read More/Less Button
body: <p>I am trying to truncate the text which is inside inline html by the length of the text (excluding html) / 2 and add read more button and reverse - add read less button and hide the half of the text. It works if the text is only raw paragraph. But when the text is inline html like below - with ol,ul,headings, it doesn't work. Can someone give a hand on this? Thank you! </p>
  
  <pre><code>&lt;div class="truncate"&gt;
   &lt;div class="toggledText" id="toggledText"&gt;
   &lt;h1&gt;Lorem Ipsum is simply &lt;/h1&gt;
    &lt;h2&gt;Lorem Ipsum is simply &lt;/h2&gt;
    &lt;p&gt;&lt;strong&gt;Thank you for scanning. &lt;/strong&gt;&lt;/p&gt; 
    &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting 
      industry. Lorem Ipsum has been the industry's standard dummy text 
      ever since the 1500s, when an unknown printer took a galley of type 
      and scrambled it to make a type specimen book. It has survived not 
      only five
     &lt;ol&gt;
      &lt;li&gt;Lorem Ipsum is simply &lt;/li&gt;
      &lt;li&gt;Lorem Ipsum is simply. &lt;/li&gt;
     &lt;/ol&gt;
     &lt;ul&gt;
      &lt;li&gt;Lorem Ipsum is simply &lt;/li&gt;
      &lt;/ul&gt;
  
  
  
     var numberOfToggled = document.getElementsByClassName('toggledText');
  
     for(i=0; i&lt;numberOfToggled.length; i++){
  
      var el = numberOfToggled[i];
  
  
    var elText = el.innerHTML.trim();
    var charLimit = elText.length / 2;
  
          if(elText.length &gt; charLimit){
              var showStr = elText.slice(0,charLimit);
              var hideStr = elText.slice(charLimit);
              el.innerHTML = showStr + '&lt;span class="morePoints"&gt;...&lt;/span&gt; &lt;span class="trimmed"&gt;' + hideStr + '&lt;/span&gt;';
              el.parentElement.innerHTML = el.parentElement.innerHTML + "&lt;div class='read-more'&gt;&lt;a href='#' class='more'&gt;&lt;/a&gt;";
          }
  
      }
  
      window.onclick = function(event) {
          if (event.target.className == 'more') {
      event.preventDefault();
              event.target.parentElement.parentElement.classList.toggle('showAll');
          }
      }
  </code></pre>