JSFiddle - React, Tailwind, and code Playground

by Vikram Deshmukh

HTML

<!-- Convert table to accordion -->
<table>
  <tbody>
    <tr>
      <td>Tip 9: Planning your Summer</td>
      <td>April 18, 2018</td>
      <td><p dir="ltr"><span><strong>Summer Registration</strong>: </span><span>Summer registration opens next week (on Monday April 9th). </span><a href="/summer/" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=http://www.sjsu.edu/summer/&amp;source=gmail&amp;ust=1524160819573000&amp;usg=AFQjCNHmVgcN1um2k3MGNXnF1akObJLkeg"><span>The class schedule and calendar are online.</span></a><span> You can view your</span><a href="http://my.sjsu.edu/students/student_tutorials/QS_SR_SS_View_Enrollment_Appointments/index.html" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&amp;q=http://my.sjsu.edu/students/student_tutorials/QS_SR_SS_View_Enrollment_Appointments/index.html&amp;source=gmail&amp;ust=1524160819573000&amp;usg=AFQjCNEbAzY6baMBY8e9or51um1FmrZARA"><span> registration appointment for summer in MySJSU</span></a><span>.</span></p>
                        <p dir="ltr"><span><strong>Year Round Pell</strong>: </span><span>Effective July 2017, the federal government implemented the Year-Round Pell Grant
                              program. This means Pell Grant funds can be used to cover a portion of the cost of
                              summer courses. To take advantage of this, you must be eligible during the current
                              academic year for the Pell Grant and take a minimum of six units. These can all be
                              taken in one summer session or you can take three units in each session. If you have
                              questions on whether you are eligible to use the Pell Grant in the summer or if it
                              is the right financial decision for you, </span><a href="/faso/hours/index.html" target="_blank"...

JavaScript

const target = document.querySelector("table");

target.insertAdjacentHTML("afterend", "<div class='accordion-container'></div>")
const cont = target.nextSibling;

target.querySelectorAll("tr").forEach(function(elem){
  cont.insertAdjacentHTML("beforeend", 
  `<p class="accordion-button-container">
  	<button class="accordion">${elem.childNodes[1].innerHTML}
    	<span class="timestamp">${elem.childNodes[3].innerHTML}</span>
    </button>
  </p>
  <div class='panel' style='display:none'>${elem.childNodes[5].innerHTML}</div>`)
})

target.parentNode.removeChild(target);