Forums

I want to create a table using custom code in chronoforms v5. I had someone do the exact table in WordPress for me before - the photograph or screenshot it attached below.

This are the css, php and javascript codes. Kindly help me achieve my aim

<?php
/**
 * My Orders
 *
 * Shows recent orders on the account page
 *
 * @author 		WooThemes
 * @package 	WooCommerce/Templates
 * @version     2.3.10
 */
global $idarray;
global $twoarray;
global $onearray;
global $newarray;
global $product;
global $productarray;
global $skuarray;
global $sku_post;
global $product_squ;
$idarray = array();
$twoarray = array();
$onearray = array();
$newarray = array();
$skuarray = array();
$product = array();
$sku_post = array();
global $wpdb;


//$product = array('Transfer to Bank Account','Airtel Mobile Recharge','Glo Mobile Recharge','Visafone Mobile Recharge','MTN Airtime Recharge','Etisalat Mobile Recharge','Drum Battle','StarTimes Subscription','Dstv Subscription','Esebun Limited', 'Gotv Subscription','Probun Wallet Collections','Probun PayBox Collections','Fund Probun eWallet','Fund etranzact Genesis Card','Fund etranzact PocketMoni','Pay: Atanunu Igbunuroghene');
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
function get_woocommerce_product_list() {
    $full_product_list = array();

    $loop = new WP_Query( array( 'post_type' => array('product'), 'posts_per_page' => -1 ) );


    while ( $loop->have_posts() ) : $loop->the_post();
        $theid = get_the_ID();
        $product11 = new WC_Product($theid);
        if( get_post_type() == 'product' ){
            $parent_id = wp_get_post_parent_id($theid );
            $sku = get_post_meta($theid, '_sku', true );
            $thetitle = get_the_title( $parent_id);

        } else {
            $sku = get_post_meta($theid, '_sku', true );
            $thetitle = get_the_title();
        }
        if (!empty($sku)) $full_product_list[] = array($thetitle, $sku, $theid);
    endwhile; wp_reset_query();
    sort($full_product_list);
    return $full_product_list;
}
$pro = array();

$pro = get_woocommerce_product_list();

for($i = 0; $i<count($pro);$i++)
{
    if($str != $pro[$i][0])
    {
        array_push($product, $pro[$i][0]);
        array_push($sku_post,array($pro[$i][2],$pro[$i][1]));
        $str = $pro[$i][0];
    }

}

for($i = 0; $i < count($product); $i++){
    $productarray[$product[$i]] = array();
}

$customer_orders = get_posts( apply_filters( 'woocommerce_my_account_my_orders_query', array(
    'numberposts' => $order_count,
    'meta_key'    => '_customer_user',
    'meta_value'  => get_current_user_id(),
    //'post_type'   => wc_get_order_types( 'view-orders' ),
    'post_type'   => wc_get_order_types( 'shop_order' ),
    'post_status' => array_keys( wc_get_order_statuses() )
) ) );


if ( $customer_orders ) : ?>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
    <div class="featured-box align-left">
        <?php
        foreach ( $customer_orders as $customer_order ) {
            $order = wc_get_order($customer_order);
            $order->populate($customer_order);
            $item_count = $order->get_item_count();
            $orderarry = get_object_vars($customer_order);
            array_push($idarray, $orderarry['ID']);
            $post_id = $orderarry['ID'];
            //           echo $post_id;
            $post_status = $customer_order->post_status;

            $skuname = $wpdb->get_results( "SELECT meta_value FROM $wpdb->postmeta WHERE meta_key='_sku' AND post_id=$post_id and post_status='wc-completed'");
            //           echo sizeof($skuname);
            if(count($skuname)){
                array_push($skuarray[$post_id], $skuname[0]);
            }

        }


        for($i=0; $i<sizeof($idarray); $i++){
            $order1 = wc_get_order( $idarray[$i] );
            if($order1->post_status != 'wc-completed') continue;

            foreach( $order1->get_items() as $item_id => $item ) {
                $id_number = get_post_meta($idarray[$i],'_order_number',true);
                $variate = get_post_meta($idarray[$i], 'destination-bank',true);

                array_push($productarray[$item['name']],
                    array($item['line_total'], $idarray[$i], $item['product_id'], $pro[$i][1], $item_id, $id_number,  $item['destination-bank']));


            }

        }
//        print '<pre>';
//        print_r($productarray);
//        print '</pre>';


        for($i=0; $i<count($productarray);$i++)
        {
            if($productarray[$product[$i]]){
                ?>
                <div class="akordeon-item" style="margin-top: 15px;">
                    <div class="akordeon-item-head akordeon-border-bottom">
                        <div class="akordeon-item-head-container"><div class="akordeon-icon clearfix"><span id="plusspan">+</span></div>
                            <div class="akordeon-heading"><?php echo $product[$i]; ?></div>
                            <div style="float: right" class="akordeon-heading">
                                <?php echo count($productarray[$product[$i]]); ?>
                                <?php if(count($productarray[$product[$i]])>1){   ?>
                                      Payments
                                <?php } else{ ?>
                                      Payment
                                <?php }?>
                            </div>
                        </div>
                    </div>


                    <?php
                    for($j = 0; $j < count($productarray[$product[$i]]); $j++){


                        ?>
                        <div class="akordeon-item-body akordeon-border-bottom" style="height: auto; display: none;">
                            <div class="akordeon-item-content metrouicss">
                                <table class="striped">
                                    <?php if($j==0){    ?>
                                        <thead>
                                        <tr>
                                            <th><strong>Option</strong></th>
                                            <th><strong>Order ID</strong></th>
                                            <th><strong>Reference</strong></th>
                                            <th><strong>Amount</strong></th>
                                            <th class="right"><strong></strong></th>
                                        </tr>
                                        </thead>
                                    <?php } ?>
                                    <tbody>
                                    <tr id="div_payament_32">
                                        <td style="width:24% !important;">
                                            <span id="display_span">
                                                <?php
                                                if($productarray[$product[$i]][$j][6]=="")
                                                    {
                                                        echo $product[$i];
                                                    }
                                                else {
                                                    echo $productarray[$product[$i]][$j][6];
                                                }
                                                for($k=0; $k<count($sku_post);$k++) {
                                                    if($sku_post[$k][0] == $productarray[$product[$i]][$j][2]) {
                                                       $product_squ = $sku_post[$k][1];
                                            //            break;
                                                    }
                                                }
                                                ?>
                                            </span><input value="Data ERC - N1,000(260MB  worth of data)" id="edit_input" style="background-color: wheat; display: none"></td>
                                        <td style="width:12% !important;"><?php  echo $productarray[$product[$i]][$j][1]; ?></td>
                                        <td style="width:24% !important;">PMB/<?php
                                            echo $product_squ.'/'.$productarray[$product[$i]][$j][1].'/'.$productarray[$product[$i]][$j][2].'/'.$productarray[$product[$i]][$j][5]; ?></td>
                                        <td style="width:12% !important;"><?php echo number_format($productarray[$product[$i]][$j][0], 2, '.', ','); ?></td>
                                        <td class="right">
                                            <div id="display_commands">
                                                <form action="/Payment/Pay" method="POST" style="display: inline;">
                                                    <input name="__RequestVerificationToken" type="hidden" value="">
                                                    <input type="hidden" name="customerId" value="07019384144">
                                                    <input type="hidden" name="serviceId" value="airteldataplan">
                                                    <input type="hidden" name="optionId" value="03">
                                                    <button class="label label-success border-radius-3" type="submit" onclick="return confirm('Are you sure you want to delete payment data for Data ERC - N1,000(260MB  worth of data)?');">Pay</button>
                                                </form>

                                                <a href="/record?orderid=<?php echo $productarray[$product[$i]][$j][1]; ?>&ordernumb=<?php $productarray[$product[$i]][$j][5]; ?>&paymentcode=<?php echo $productarray[$product[$i]][$j][3]; ?>" target="_blank">
                                                    <span class="label label-warning border-radius-3" type="submit">View</span></a>

                                                <a href="/invoice?orderid=<?php echo $productarray[$product[$i]][$j][1]; ?>&ordernumb=<?php $productarray[$product[$i]][$j][5]; ?>&paymentcode=<?php echo $productarray[$product[$i]][$j][3]; ?>" target="_blank">
                                                    <span class="label label-default border-radius-3" onclick="onEdit('div_payament_32')">Invoice</span></a>

                                                <a href="/support?orderid=<?php echo $productarray[$product[$i]][$j][1]; ?>&ordernumb=<?php $productarray[$product[$i]][$j][5]; ?>&paymentcode=<?php echo $productarray[$product[$i]][$j][3]; ?>" target="_blank">
                                                    <span class="label label-info border-radius-3">Need Help</span>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>

                                </table>
                            </div>
                        </div>


                        <?php


                    }
                    ?>
                </div>
                <?php

            }
        }
        ?>
    </div>


    <script type="text/javascript" src="../../../jquery.contenttoggle.js" ></script>
    <script>
        $(document).ready(function () {

            $('.akordeon-item .akordeon-icon').toggle(
                function(){

                    if($(this).parents('.featured-box').find('.akordeon-item .akordeon-item-body').hasClass('show')){
                        $(this).parents('.featured-box').find('.akordeon-item .akordeon-item-body').removeClass('show');
                        $(this).parents('.featured-box').find('#plusspan').text("+");
                    }
                    $(this).find('#plusspan').text("-");
           //         $(this).find('.akordeon-item-body').addClass('show');
                    $(this).parents('.akordeon-item').find('.akordeon-item-body').addClass('show');
                },
                function() {
                    //   $('.akordeon-item').find("div").addClass('show');
                    $(this).find('#plusspan').text("+");
                    //$(this).find('.akordeon-item-body').removeClass('show');
                    $(this).parents('.akordeon-item').find('.akordeon-item-body').removeClass('show');
                });

        });



    </script>
<?php endif; ?>

( function( $ ) {
  "use strict";

  /* Plugin constants. */
  var TRIGGER_KEY_CODES = [ 13 /*enter*/, 32 /*space*/ ];
  var AVAILABLE_ROLE_BUTTON_TAGS = [ "a", "div", "figure", "p", "pre",
                                    "blockquote", "img", "ins", "del",
                                    "output", "span", "summary" ];

  /* Plugin variables. */
  var pluginName  = "contentToggle";
  var instances = {};
  var defaultOptions = {};
  var $global = $( document );
  var isIthing = navigator.userAgent.match( /iPad|iPhone/i );
  var sanitize = /[^a-z0-9_-]/gi;
  var uid = 0;

  /* Plugin default options. */
  defaultOptions = {
    defaultState: null,
    globalClose: false,
    independent: false,
    noSelfClosing: false,
    beforeCallback: null,
    triggerSelector: ".js-contentToggle__trigger",
    triggerSelectorContext: true,
    labelSelector: null,
    labelSelectorContext: true,
    contentSelector: ".js-contentToggle__content",
    contentSelectorContext: true,
    elementClass: "is-open",
    triggerClass: "is-active",
    openedLabel: null,
    closedLabel: null,
    toggleProperties: [ "height" ],
    toggleOptions: {
      duration: 0
    }
  };

  /**
   * Plugin Constructor.
   *
   * @param {Node|jQuery} element
   *   Main DOM element.
   * @param {string} selector
   *   Element initial selector.
   * @param {object} options
   *   Instance specific options.
   */
  function Plugin( element, selector, options ) {
    var data;

    // Merge specific and default options.
    this.options = {
      group: selector
    };
    $.extend( this.options, defaultOptions, options );

    // Initialize data.
    this.$element = ( element instanceof $ ) ? element : $( element );
    this.uid = ++uid;

    // Data initialization.
    this.setup();

    // Empty object initialization.
    data = this.$element.data( pluginName );
    if ( !instances[ this.options.group ] ) {
      instances[ this.options.group ] = {};
    }
    if ( !data ) {
      data = {};
    }

    // Check if instance has not been already initialized.
    if ( !data[ this.options.group ] ) {

      // Save the new instance.
      instances[ this.options.group ][ this.uid ] = this;
      data[ this.options.group ] = this;
      this.$element.data( pluginName, data );

      // Plugin initialization.
      this.bind();
      this.init();
    }
  }

  /**
   * Setup plugin.
   * e.g. Get DOM elements, setup data...
   */
  Plugin.prototype.setup = function() {
    this.setupDataOptions();

    // Sanitize group name.
    if ( this.options.group ) {
      this.options.group = this.options.group.toString().replace( sanitize, "" );
    }

    // Parse JSON options.
    if ( typeof this.options.toggleProperties === "string" ) {
      this.options.toggleProperties = JSON.parse( this.options.toggleProperties );
    }
    if ( typeof this.options.toggleOptions === "string" ) {
      this.options.toggleOptions = JSON.parse( this.options.toggleOptions );
    }

    // Get trigger elements.
    if ( this.options.triggerSelectorContext ) {
      this.$triggers = $( this.options.triggerSelector, this.$element );
    } else {
      this.$triggers = $( this.options.triggerSelector );
    }
    if ( this.$triggers.length === 0 ) {
      this.$triggers = this.$element;
    }

    // Get labels elements.
    if ( this.options.labelSelector ) {
      if ( this.options.labelSelectorContext ) {
        this.$labels = $( this.options.labelSelector, this.$element );
      } else {
        this.$labels = $( this.options.labelSelector );
      }
    } else {
      this.$labels = this.$triggers;
    }

    // Get content elements.
    if ( this.options.contentSelectorContext ) {
      this.$contents = $( this.options.contentSelector, this.$element );
    } else {
      this.$contents = $( this.options.contentSelector );
    }

    // Get callback.
    if ( typeof this.options.beforeCallback === "string" &&
        window[this.options.beforeCallback] &&
        typeof window[ this.options.beforeCallback ] === "function" ) {
      this.options.beforeCallback = window[ this.options.beforeCallback ].bind( this );
    } else if ( typeof this.options.beforeCallback === "function" ) {
      this.options.beforeCallback = this.options.beforeCallback.bind( this );
    }
  };

  /**
   * Setup plugin specific data.
   * e.g. Get DOM elements, setup data...
   */
  Plugin.prototype.setupDataOptions = function() {
    $.each(
      this.$element.data(),
      function( index, value ) {
        if ( index in defaultOptions ) {
          this.options[ index ] = value;
        }
      }.bind( this )
    );
  };

  /**
   * Bind events.
   */
  Plugin.prototype.bind = function() {
    var namespaces = "." + pluginName + "." + this.options.group;
    var eventName = ( isIthing && this.options.globalClose ) ? "touchstart" : "click";
    var $all = this.$element.add( this.$triggers ).add( this.$contents );

    // Bind custom events on all elements.
    $all.on( "destroy" + namespaces, this.destroy.bind( this ) );
    $all.on( "toggle" + namespaces, $.proxy( this.toggle, this, null ) );
    $all.on( "close" + namespaces, $.proxy( this.toggle, this, false ) );
    $all.on( "open" + namespaces, $.proxy( this.toggle, this, true ) );
    $all.on( "isOpen" + namespaces, function() {
      return this.isOpen;
    }.bind( this ) );

    // Bind native events on triggers.
    this.$triggers.on( eventName + namespaces, function( event ) {
      event.preventDefault();
      if ( !event.originalEvent.mozInputSource ||
          event.originalEvent.mozInputSource !== MouseEvent.MOZ_SOURCE_KEYBOARD ) {
        this.toggle( null, event );
      }
    }.bind( this ) );
    this.$triggers.on( "keydown" + namespaces, function( event ) {
      if ( $.inArray( event.keyCode, TRIGGER_KEY_CODES ) !== -1 ) {
        event.preventDefault();
        this.toggle( null, event );
      }
    }.bind( this ) );

    // Bind native events on contents (avoid triggers click event).
    this.$contents.on( eventName + namespaces, function( event ) {
      event.stopPropagation();
    } );
  };

  /**
   * Initialize default plugin state.
   */
  Plugin.prototype.init = function() {

    // Initialize triggers IDs.
    this.tid = [];
    this.$triggers.each( $.proxy( this.initId, this, this.tid, "contentToggle__trigger" ) );

    // Initialize contents IDs.
    this.cid = [];
    this.$contents.each( $.proxy( this.initId, this, this.cid, "contentToggle__content" ) );

    // Initialize triggers attributes.
    this.$triggers.each( function( index, element ) {
      var $trigger = this.$triggers.eq( index );
      if ( !$trigger.attr( "role" ) &&
          $.inArray( element.tagName.toLowerCase(), AVAILABLE_ROLE_BUTTON_TAGS ) !== -1 ) {
        $trigger.attr( "role", "button" );
      }
      if ( !$trigger.attr( "tabindex" ) ) {
        $trigger.attr( "tabindex", "0" );
      }
    }.bind( this ) );
    this.$triggers.attr( "aria-controls", this.cid.join( " " ) );

    // Default plugin state.
    if ( $.inArray( this.options.defaultState, [ "open", "close" ] ) !== -1 ) {
      this.$element.trigger( this.options.defaultState + "." + pluginName );
    } else {
      this.isOpen = this.$contents.is( ":visible" );
      this.update();
    }
  };

  /**
   * Initialize element id.
   */
  Plugin.prototype.initId = function( ids, prefix, index, element ) {
    var $element = $( element );
    ids[ index ] = $element.attr( "id" );
    if ( !ids[ index ] ) {
      ids[ index ] = prefix + "-" + this.uid + "-" + index;
      $element.attr( "id", ids[index] );
    }
  };

  /**
   * Toggle content.
   *
   * @param {boolean} state
   *   The state of the wanted display.
   * @param {Event} event
   *   The event object.
   */
  Plugin.prototype.toggle = function( state, event ) {
    event.stopPropagation();

    if ( typeof state !== "boolean" ) {
      state = !this.isOpen;
    }

    this.$currentTrigger = null;
    if ( this.$triggers.is( event.currentTarget ) ) {
      this.$currentTrigger = $( event.currentTarget );
    }

    if ( !this.options.beforeCallback ||
        ( typeof this.options.beforeCallback === "function" &&
         this.options.beforeCallback( event ) ) ) {
      if ( state ) {
        this.open();
      } else if ( !this.options.noSelfClosing ) {
        this.close();
      }
    }
  };

  /**
   * Open content.
   */
  Plugin.prototype.open = function() {
    var eventName;
    if ( this.isOpen !== true ) {
      this.isOpen = true;
      this.do();
      this.closeAll( true );
      if ( this.options.globalClose ) {
        eventName = isIthing ? "touchstart" : "click";
        $global.on( eventName + "." + pluginName + this.uid, function() {
          this.closeAll();
        }.bind( this ) );
      }
    }
  };

  /**
   * Close content.
   */
  Plugin.prototype.close = function() {
    if ( this.isOpen !== false ) {
      this.isOpen = false;
      this.do();
      $global.off( "." + pluginName + this.uid );
    }
  };

  /**
   * Close all binded instances.
   *
   * @param {boolean} butItself
   *   Close all but itself or not.
   */
  Plugin.prototype.closeAll = function( butItself ) {
    if ( !this.options.independent ) {
      $.each( instances[ this.options.group ], function( uid, instance ) {
        if ( Number( uid ) !== this.uid ) {
          instance.close();
        }
      }.bind( this ) );
    }
    if ( !butItself ) {
      this.close();
    }
  };

  /**
   * Perform toggle action.
   */
  Plugin.prototype.do = function() {
    var toggleProperties = {};
    var action = this.isOpen ? "show" : "hide";

    this.update();

    $.each(
      this.options.toggleProperties,
      function( index, value ) {
        toggleProperties[ value ] = action;
      }
    );

    this.$contents.stop().animate(
      toggleProperties,
      this.options.toggleOptions
    );
  };

  /**
   * Update classes and aria data.
   */
  Plugin.prototype.update = function() {
    if ( this.isOpen ) {
      this.$element.addClass( this.options.elementClass );
      this.$contents.attr( "aria-hidden", false );
      this.$triggers.attr( "aria-expanded", true );
      if ( this.$currentTrigger ) {
        this.$currentTrigger.addClass( this.options.triggerClass );
      } else {
        this.$triggers.addClass( this.options.triggerClass );
      }
      if ( typeof this.options.openedLabel === "string" ) {
        this.$labels.html( this.options.openedLabel );
      }
    } else {
      this.$element.removeClass( this.options.elementClass );
      this.$contents.attr( "aria-hidden", true );
      this.$triggers.attr( "aria-expanded", false );
      this.$triggers.removeClass( this.options.triggerClass );
      if ( typeof this.options.closedLabel === "string" ) {
        this.$labels.html( this.options.closedLabel );
      }
    }
  };

  /**
   * Destroy events.
   */
  Plugin.prototype.destroy = function() {
    this.$element.removeData( pluginName );
    this.$element.off( "." + pluginName );
    this.$triggers.off( "." + pluginName );
    this.$contents.off( "." + pluginName );
    $global.off( "." + pluginName + this.uid );
  };

  /* Expose jQuery plugin. */
  $.fn[ pluginName ] = function( options ) {
    var selector = this.selector;
    return this.each( function() {
      new Plugin( this, selector, options );
    } );
  };
} )( jQuery );

.tabs {
    width: 100%;
    float: none;
    list-style: none;
    position: relative;
    padding: 0;
    margin-bottom: 5em;
}
.tabs li{
    float: left;
}
.tabs label {
    display: block;
    padding: 10px 20px;
    border-radius: 2px 2px 0 0;
    color: #c60000;
    font-size: 18px;
    font-weight: normal;
    background: rgba(255,255,255,0.2);
    cursor: pointer;
    position: relative;
    top: 3px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.tabs label:hover {
    background: #e6b2b2;
    top: 0;
}

[id^=tab]:checked + label {
    background: #c60000;
    color: white;
    top: 0;
}

[id^=tab]:checked ~ [id^=tab-content] {
    display: block;
}
.tab-content{
    z-index: 2;
    display: none;
    text-align: left;
    width: 100%;
    line-height: 140%;
    padding-top: 10px;
    padding: 15px;
    position: absolute;
    left: 0;
    box-sizing: border-box;
    -webkit-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
/*  AJH  */
/*****************************************/
.akordeon {
    color: #492528;
    font-size: 15px;
    behavior: url(PIE.htc);
}

.akordeon-item {
    position: relative;
    border-bottom:20px solid #EEE;
}

.akordeon-item .akordeon-item-head {
    height: 44px;
    background: #EEEEEE !important;
    padding-top: 14px;
    margin-top: 10px;
}

.akordeon-item .akordeon-item-body {
    background: #eee; /* Old browsers */
    border-bottom: none;
    overflow: hidden;
}

.akordeon-icon {
    width: 34px;
    height: 30px;
    background: #65829D !important;
    position: relative;
    padding: 0;
    margin: 0;
    border-radius: 5px;
    float: left;
    margin-left: 1em;
    cursor: pointer;
    behavior: url(PIE.htc);

}

.akordeon-heading {
    float: left;
    color: #575353 !important;
    padding-left: 10px;
    padding-top: 4px;
    font-weight: bold;
    margin-right: 1em;
}

.akordeon-icon span {
    color: white;
    font-size: 34px;
    position: absolute;
    left: 7px;
    top: 2px;
    font-weight: bolder;
    text-align: center;
}

.akordeon-item.expanded .akordeon-icon span {
    top: -13px;
}

.akordeon-item-head-container {
    width: 100%;
    position: absolute;
    left: -8px;
    cursor: pointer;
    margin-top:0px;
}

.akordeon-item.expanded .akordeon-item-body {
    /*border-top: solid 1px #5c5c5c;*/
}

.akordeon-item.collapsed {
}

.akordeon-item.expanded .akordeon-heading {
    color: #c9f055;
}

.akordeon-item.expanded .akordeon-item-head {
    background: #E6E3E3 !important;
}

.akordeon-item-content {
    overflow: auto;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
}

.akordeon-border-bottom {
    /*  border-bottom: solid 1px #888484;  */
}

.akordeon-border-top {
    border-top: solid 1px black;
}

.akordeon-item.expanded .akordeon-item-body.akordeon-border-bottom {
}


.metrouicss table {
    width: 100%;
    border-collapse: separate;
    margin: 0 0;
}

.metrouicss table thead tr th,
.metrouicss table thead tr td {
    display: table-cell;
    vertical-align: bottom;
    padding-bottom: 5px;
    padding-top: 10px;
    padding-left: 5px;
    border-bottom: 1px #ddd solid;
    border-right: 1px #ddd solid;
    border-left: 1px transparent solid;
    border-top: 1px transparent solid;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.01em;
    line-height: 13pt;
    font-smooth: always;
    color: rgba(0, 0, 0, 0.6);
    text-align: left;
}

.metrouicss table thead tr th.right,
.metrouicss table thead tr td.right {
    text-align: right;
    padding-right: 10px;
}

.metrouicss table thead tr th.last,
.metrouicss table thead tr td.last {
    border-right: 1px transparent solid;
}

.metrouicss table thead tr th:last-child,
.metrouicss table thead tr td:last-child {
    border-right: 1px transparent solid;
}

.metrouicss table tbody tr {
    border: 1px #fff solid;
}

.metrouicss table tbody tr td {
    font-weight: 300;
    font-size: 9pt;
    letter-spacing: 0.02em;
    line-height: 14pt;
    font-smooth: always;
    padding: 3px 10px;
    border-right: 1px #ddd solid;
    border-bottom: 1px #ddd solid;
    border-left: 1px transparent solid;
    border-top: 1px transparent solid;
    box-sizing: border-box;
}

.metrouicss table tbody tr td.right {
    text-align: right;
}

.metrouicss table tbody tr td.center {
    text-align: center;
}

.metrouicss table tbody tr td.last {
    border-right: 1px transparent solid;
}

.metrouicss table tbody tr td:last-child {
    border-right: 1px transparent solid;
}

.metrouicss table tbody tr.success {
    background-color: #00a300 !important;
}

.metrouicss table tbody tr.error {
    background-color: #b91d47 !important;
}

.metrouicss table tbody tr.warning {
    background-color: #e3a21a !important;
}

.metrouicss table tbody tr.info {
    background-color: #2d89ef !important;
}

.metrouicss table tbody tr.info td,
.metrouicss table tbody tr.warning td,
.metrouicss table tbody tr.error td,
.metrouicss table tbody tr.success td {
    color: #ffffff !important;
}

.metrouicss table tbody tr.selected-row {
    background-color: rgba(28, 183, 236, 0.1) !important;
}

.metrouicss table tbody tr.selected-row td:first-child {
    border-left: 1px #1c98cc solid;
}

.metrouicss table tbody tr.selected-row td:last-child {
    border-right: 1px #1c98cc solid;
}

.metrouicss table tbody tr.selected-row td {
    border-top: 1px #1c98cc solid;
    border-bottom: 1px #1c98cc solid;
}

.metrouicss table.striped tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.metrouicss table.hovered {
    border-collapse: separate !important;
}

.metrouicss table.hovered thead tr th:hover,
.metrouicss table.hovered thead tr td:hover {
    border: 1px #1c98cc solid;
    background: rgba(28, 183, 236, 0.1);
}

.metrouicss table.hovered tbody tr:hover {
    background-color: rgba(28, 183, 236, 0.1);
}

.metrouicss table.hovered tbody tr:hover td:first-child {
    border-left: 1px #1c98cc solid;
}

.metrouicss table.hovered tbody tr:hover td:last-child {
    border-right: 1px #1c98cc solid;
}

.metrouicss table.hovered tbody tr:hover td {
    border-top: 1px #1c98cc solid;
    border-bottom: 1px #1c98cc solid;
}

.metrouicss table.bordered {
    border-collapse: separate !important;
    border: 1px #ccc solid !important;
}

.metrouicss table.bordered tbody tr:last-child td {
    border-bottom: 0;
}
.label {
    font-weight: 300;
    cursor: pointer;
}

.label-success,
.badge-success {
    background-color: rgb(251,222,187);
    background-image: none !important;
    text-shadow: none !important;
}

.label-warning,
.badge-warning {
    background-color: #Ec827F;
    background-image: none !important;
    text-shadow: none !important;
}

.label-important,
.badge-important {
    background-color: #ed4e2a;
    background-image: none !important;
    text-shadow: none !important;
}

.label-info,
.badge-info {
    background-color: #6da8c5;
    background-image: none !important;
    text-shadow: none !important;
}

.label-mini {
    font-size: 11px;
    font-weight: 300;
}

.label-default {
    background-color: #999 !important;
    text-shadow: none !important;
}

hr {
    border-bottom: 1px solid #BBB !important;
}

.label {
    display: inline-block;
    padding: 2px 4px;
    font-size: 11px;
    line-height: 14px;
    color: #fff;
    white-space: nowrap;
    vertical-align: baseline;
    text-transform: uppercase !important;
}
.show{
    display: block;
}
.hide{
    display: none;
}

/********************************************/
.table-bordered tr th{
    width: 30%;
    text-align: right;
}

Hi atanunu,

Sorry, I have no idea what you need to do and the hundreds of lines of code tell me nothing useful without trying to analyse them.

It appears that the table has sliders - ChronoForms can support those using Containers if the number of sliders is fixed. You can display a table inside a Container using a Custom Code element with PHP inside it that loops through the data generating table rows.

Bob

Sir,

That was a WordPress project. However, I need to implement it for Joomla using Chronoforms. I need a table that is collapsible and sorted base on a particle series.

Hi atanunu,

The only answer I can give is that . . . yes you can probably do that in ChronoForms using Custom code.

Bob