JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<button>div-it</button>

<table border="0" id="acc" class="div-it">
    <tbody>
        <tr>
            <td class="acc-title">
            Title
            </td>
            <td class="acc-content">
            CONTENT            
            </td>
        </tr>
    </tbody>
</table>

<table border="0" id="acc" class="div-it">
    <tbody>
        <tr>
            <td class="acc-title">
            Title
            </td>
            <td class="acc-content">
            CONTENT            
            </td>
        </tr>
    </tbody>
</table>

CSS

.table {
    margin: 4px 2px;
}

#acc {
  width: 100%;
}
.acc-title {
    background-color: #E3F1FF; 
    color: #000;
    cursor: pointer;
    width: 100%;
}
.acc-content {
    margin:0;
    width: 100%;
}
.acc-title:hover {
    background-color: #EBEBEB;
}
.acc-title-active {
    background-color: #EBEBEB;
}

JavaScript

/* convert TDs into DIVs */

function initMenu(){
    $(".acc-content").hide();
    $(".acc-title").click(function(){
        $(this).next().slideToggle("fast")
    })
}
$(function(){
    initMenu();
});
$(function(){
    $("#acc .acc-title").click(function(){
        $(this).toggleClass("acc-title-active");
    });
});

function divIt () {
    var table = $(".div-it");
    var cell = table.find("td");
    
    // change cells and keep original classes
    $(cell).each(function() {
        var elementClass = $(this).attr("class") + ' ' + 'cell';
        $(this).replaceWith( '<div class="' + elementClass + '">' + $(this).text() + '</div>' );
    });

    // change the rest of table
    $(table).replaceWith( $('table').html()
       .replace(/<tbody/gi, "<div class='table'")
       .replace(/<tr/gi, "<div class='row'")
       .replace(/<\/tr>/gi, "</div>")
    );
    initMenu();

}

$("button").click(function(){
    divIt ();
});