JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<div id="content">
    <div class="fs-module-media">
        <div style="width:960px; text-align:left;" class="page-panel">
            <div class="body">
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
                            <td align="center" valign="middle" width="69">
                                <a href="#01">
                                    <a href="#01"><img height="31" src="http://contentlive.s3.amazonaws.com/3055/page/cbdff9d4-1393-45c1-84cf-3e182974a6f2_1.jpg" style="border:0px;" width="43" /></a>
                                </a>
                            </td>
                            <td align="center" valign="middle" width="282">
                                <a href="#01">
                                    <img height="116" src="http://contentlive.s3.amazonaws.com/3055/page/85c509ca-a95d-4621-a84d-5d1e8c826658_1.jpg" style="border:0px;" width="232" />
                                </a>
                            </td>
                            <td style="font-size:18px;" valign="middle" width="432">
                                <p>Create fixed asset account codes</p>
                                <p style="font-size:14px;">
                                    Before setting up the fixed asset register ensure you have the account codes set up so they can be correctly linked to the assets.
                                </p>
                                <p style="font-size:14px; font-weight:bold;">
                                    <a href="#01" style="text-decoration:none; color:#00a3d3;">+ Learn more</a>
                                </p>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <br/>

                <table border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody>
                        <tr>
       ...

CSS

html, body
{
    background: #f0f0f0 url(../images/bgtile.gif) repeat -70% 0;
}
body
{
    margin: 0pt;
    padding: 0pt;
    color: #010101;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 0.8em;
    height:100%;
}


.icon_scorm_passed
{
    background-image:url(../images/scorm/tick.png) ! important; 
    width:20px;
    height:20px;
}
.module-star-rating
{
    position:absolute;
    top:10px;
    left:50%;
    width:100px;
    margin-left:-50px;
}
#rating{

}
.icon_scorm_failed
{
    background-image:url(../images/scorm/cross.png) ! important; 
    width:20px;
    height:20px;
}

.icon_scorm
{
    background-image:url(../images/scorm/application_go.png) ! important; 
    width:20px;
    height:20px;
}



.icon_finish
{
    background-image:url(../images/scorm/icons.png) ! important;
    background-position:-51px 0px !important;
    padding:0px 2px 5px 26px !important;
    font-weight:bold !important;
    font-size:14px !important;
    color:#666 !important;
}


.icon_next
{
    background-image:url(../images/scorm/icons.png) ! important;
    background-position:-25px 0px !important;
    padding:0px 2px 5px 26px !important;
    font-weight:bold !important;
    font-size:14px !important;
    color:#666 !important;
}

.icon_back
{
    background-image:url(../images/scorm/icons.png) ! important;
    background-position:0px 0px !important;
    padding:0px 2px 5px 26px !important;
    font-weight:bold !important;
    font-size:14px !important;
    color:#666 !important;
}

.icon_none
{
    padding:0px 2px 5px 2px !important;
    font-weight:bold !important;
    font-size:14px !important;
    color:#666 !important;
}



.debugdiv
{
    font-family:verdana;
    font-size:11px !important;
    color:#666 !important;
    overflow:auto;
}

.debugBold
{
    font-weight:bold;
}

.scorm-title
{
    font-family:verdana;
    margin-left:15px;
}

.scorm-title .course
{
    font-size:9px !important;
    color:#7C7C7C !important;
}

.scorm-title .module
{
   ...

JavaScript

/*global $ */
(function() {
    'use strict';
        
    function init(index, el) {
        var link = $(el),
            ancestor = link.parents('table'),
            table = ancestor.first(),
            hidden = false,
            more,
            href,
            name,            
            td;

        link.html('Learn more <span>&nbsp;</span>');
        link.addClass('arrow down-arrow');
        
        href = link.attr('href');
        name = $('[name=' + href.substring(1) + ']');
        
        // .wrap() returns the original element(s)
        more = (name.parents('table').first().wrap('<div class="details-wrapper"/>')).parent();

        more.hide();
        hidden = true;

        more.remove();
        more.insertAfter(table);

        td = name.parent();
        
        // prev() returns dom nodes, not text elements
        td.get()[0].removeChild(name.get()[0].previousSibling);
        td.prev().html('');

        td.find('a').filter(function() {
            return 'Back to summary' === $.trim($(this).text());
        }).each(function() {
            $(this).prev().remove();
            $(this).remove();
        });
        
        $('td').filter(function() {
            return 'Solution Detail' === $.trim($(this).text());
        }).remove();
        
        $('a[href=' + href + ']').click(function(e) {
            e.preventDefault();

            if (hidden) {
                more.slideDown('slow', function() {
                    link.toggleClass('up-arrow down-arrow');
                });
                hidden = false;
            } else {
                more.slideUp('slow', function() {
                    link.toggleClass('up-arrow down-arrow');
                });
                hidden = true;
            }
        });
    }

    $('a').filter(function() {
        return '+ Learn more' === $.trim($(this).text());
    }).each(init);
}());