JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<div class="RE-detail-outerdiv item" style="">
                                        <table class="RE-detail-table">
                                            <tbody><tr>
                                                <td>
                                                    <span class="spanAttach" style="font-weight: bold;">Attachments</span>
                                                    <ul data-bind="foreach: $root.AttachmentList">
                                                        <li>
                                                            <a id="hRefAttach" href="#" data-bind="text: FileName, click: $root.OpenAttachment">Purchase Order  POR036914.pdf</a>
                                                        </li>
                                                    
                                                        <li>
                                                            <a id="hRefAttach" href="#" data-bind="text: FileName, click: $root.OpenAttachment">Purchase Order  POR036914~FD05800.pdf</a>
                                                        </li>
                                                    
                                                        <li>
                                                            <a id="hRefAttach" href="#" data-bind="text: FileName, click: $root.OpenAttachment">Purchase Order POR036531.pdf</a>
                                                        </li>
                                                    
                                                        <li>
                                                            <a id="hRefAttach" href="#" data-bind="text: FileName, click: $root.OpenAttachment">Purchase Order POR036531~FD05800.pdf</a>
                                                        </li>
                                                    
                                                        <li>
                                                        ...

CSS

.divtable {
        display: table;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        padding: 10px;
        overflow: auto;
    }

    .popover {
        max-width: 1600px; /* Max Width of the popover (depending on the container!) */
        max-height: 100%;
        z-index: 9999;
        white-space: pre-wrap;
        border: 1px solid gray;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
    }

    .colHide {
        display: none;
    }
    .RE-detail-table td {
        padding: 3px;
    }
    .contentExpand {
        height: 20px;
        /*width: 500px;*/
        overflow: hidden;
        text-overflow: ellipsis;
        /*color: blue;*/
    }

    /*.contentExpand:hover {
            height: auto;
            width: auto;
        }*/

    .up {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
    }

    .down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }

    .RowSelected {
        background-color: lightgray;
    }

    .popuptable {
        /*width: 100%;*/
    }

        .popuptable td {
            white-space: nowrap;
            padding: 2px;
        }

    span.error {
        display: block;
        visibility: hidden;
        color: red;
        font-size: 90%;
    }

    tr.error {
        background-color: rgba(255,0,0,0.35);
    }
    /*css for table*/
    .container td {
        vertical-align: top;
    }

    .tablecontainer {
        /*table-layout: fixed;*/
        border-collapse: collapse;
        white-space: nowrap;
        border: 1px solid black;
    }

        .tablecontainer th, .tablecontainer td {
            border: 1px solid #EEEEEE;
            padding: 3px;
        }

    .ui-widget {
        font-size: 12px !important;
    }

    .divtext {
        border: none;
        padding: 5px;
        width: 30em;
        /*min-height: 10em;*/
       ...

JavaScript

function collapse(item){
     
      var lineHeight = 300;
      var height = item.height();
      if (lineHeight < height) {
          item.css({'height': lineHeight + 'px', overflow:'hidden'});
          item.children('a.toggle').length==0 && item.append("<a href='#' class='toggle'>more...</a>");
      } 
}

  $('div.item').each(function () {
    collapse($(this));
  });


  $('a.toggle').click(function (event) {
      event.preventDefault();

var toggle=$(this);
      var item=toggle.parent('div');
      if(toggle.text()=='more...'){         
         toggle.text('less...');
         item.css({'overflow':'auto', 'height':'auto'});
         }else{
         toggle.text('more...');
             collapse(item);
         }
  });