JSFiddle - React, Tailwind, and code Playground

by Andrea Nobili

HTML

<table class="standard-table-cls table-header-cls">
        <thead class="opening">
        <tr>
            <th>
                <img class="imgAccordion" src="img/arrow_down.gif"/>
                Ricerca Flussi (la funzione e' consentita per flussi inferiori alle 300 fatture)
            </th>
        </tr>
        </thead>

        <tbody class="expanded" style="display:none">
        <tr>
            <td style="width: 100em;">

                <!--<div id="ricercaFlussiHeader" class="accordion-pane-header" onclick="Javascript: visualizzaPannelli(true, false);">Ricerca Flussi</div>-->
                <div id="ricercaFlussiContent" class="accordion-pane-content">
                    
                    <table class="standard-table-cls" style="margin-left: 0 !important; margin-right: 0 !important;">

                        <tbody>
                            <tr>
                                <td width="30%">ROW 1:</td>

                                <td colspan="3">
                                    <input type="text" maxlength="3" size="5" name="giorni" />
                                </td>
                            </tr>
                            
                            <tr>
                                <td width="30%">ROW 2:</td>

                                <td colspan="3">
                                    <input type="text" maxlength="3" size="5" name="giorni" />
                                </td>
                            </tr>
                            
                            <tr>
                                <td width="30%">ROW 3:</td>

                                <td colspan="3">
                                    <input type="text" maxlength="3" size="5" name="giorni" />
                                </td>
                            </tr>
                            
                            <tr>
                                <td width="30%">ROW 4:</td>

                                <td...

CSS

/*
    Document   : main
    Created on : 4-ott-2010, 15.53.01
    Author     : a130535
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

@media print {
    .divScroll {
        overflow: visible;
        height: 400px;
        width: 95%
    }
}

@media screen {
    .divScroll {
        overflow-y: auto;
        height: 400px;
        width: 95%
    }

    .white_content {
        display: none;
        position: absolute;
        top: 30%;
        left: 40%;
        width: 230px;
        height: 130px;
        padding: 16px;
        /*border: solid 4px;*/
        /*border-color: #3b5999;*/
        background-color: transparent;
        color: #F47723;
        z-index: 1002;
        overflow: hidden;
    }

    .contenitore_tabs {
        clear: both;
        margin: 10px;
        min-height: 300px;
        border: 1px solid;
        height: 90%;
        padding: 10px;
        overflow: auto;
        border-color: #FF6600;

    }

    .clickedClass td {
        font-weight: bold;
    }

    .myDocTable td {
        font: 16px Verdana, Geneva, Arial, Helvetica, sans-serif !important;
        font-weight: bold;
        color: #f47723;
    }

    thead.opening {
        font-family: 'Oswald', Arial, sans-serif;
        padding: 3px 10px;
        text-decoration: none;
        color: #4b4b4b !important;

    }

    thead.opening tr {
        background-image: url("../img/bg_accordion_off70.png") !important;
        cursor: pointer;
        /*background-color: rgb(206,206,206)!important;*/

    }

    thead.opening th {
        /*color: white!important;*/
    }

    thead.opening:hover, thead.active {
        color: #f68e38;
    }

    /*thead.opening tr {*/
    /*background-color: red!important;*/
    /*}*/

    thead.opening img {
        border: 0;
        outline: none;
    }

    .expanded {
        padding: 5px;
    }

    .expanded p {
       ...

JavaScript

$(document).ready(function () {
            $("thead.opening").click(function () {

                //alert("INTO FIRST FUNCTION !!!");

                var theadElement = $(this);
                var tbodyElement = $(this).next();

                //alert("THEAD TAG BEFORE: " + theadElement.attr('tagName'));
                var theadClass = theadElement.attr('class');
                //alert("CLASS THEAD BEFORE: " + theadClass);

                $(this).next().slideToggle('slow', function () {
                    $(this).prev("thead.opening").toggleClass("active");
                    $("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
                    $("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");

                    //alert("THEAD TAG AFTER: " + theadElement[0].tagName);

                    // Retrieve the class of the clicked thead element in the DOM:
                    var theadClass = theadElement.attr('class');
                    //alert("CLASS THEAD AFTER: " + theadClass);

                    if(theadElement.hasClass('active')) {
                        //alert("THEAD ACTIVE");
                        //alert("TBODY RELATED TO THE CLICKED THEAD: " + tbodyElement.attr('tagName'));

                        tbodyElement.addClass('importantRule');
                    }
                    else {
                        //alert("THEAD NOT ACTIVE");

                        tbodyElement.removeClass('importantRule');

                        //tbodyElement.slideUp('slow', function() { removeClass('importantRule'); });


                    }
                });


                return false;
            });




        });