評論展開/摺疊不與評論工作更多/更少

Question

var commentCount = $('.review-history-comment').length; 
 
$('.total-count').html(commentCount); 
 

 
var commentsCountLi = $('#myList').children("li").length; 
 
if (commentsCountLi <= 0) { 
 
    $('#myList').parent('.request-action-info').addClass('no-history'); 
 
} 
 

 
var ul = $('#myList'), ulh = ul.height(), h = 0; 
 

 
ul.children('li').each(function(i) { 
 
    if(i===4) { 
 
     return false; 
 
    } 
 
    h += this.offsetHeight;   
 
}); 
 

 
$(".review-history-comment-icons").click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).toggleClass("icon-rotate"); 
 
    $(this).next(".review-history-comment-desc").toggle();   
 
    if ("$('#myList'):hasClass(.myList-overflow)") { 
 
    $("#myList").removeClass("myList-overflow");   
 
    } 
 
    if ($(".review-history-comment-desc").is(':visible')) { 
 
    $("#myList").removeClass("myList-overflow"); 
 
     $('#myList-toggle').text("View Less -"); 
 
     if ($('#myList-toggle').text("View Less -")) { 
 
     $("#myList").removeClass("myList-overflow"); 
 
     } 
 
    } 
 
    else if ($(".review-history-comment-desc").is(':hidden')){ 
 
    $("#myList").addClass("myList-overflow"); 
 
    $('#myList-toggle').text("View More +"); 
 
    } 
 
}); 
 

 
ul.css({'height':h+'px'}); 
 
$('#myList-toggle').click(function() { 
 
    ul.animate({'height':(ul.height()>h?h:ulh)+'px'}); 
 
    ($(this).text() === "View More +") ? $(this).text("View Less -") : $(this).text("View More +"); 
 
    $("#myList").toggleClass("myList-overflow"); 
 
    return false; 
 
});

.align-right { 
 
    float: right; 
 
} 
 

 
ol, ul { 
 
    list-style: none; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
} 
 

 
/* line 49, ../sass/base.scss */ 
 
.align-left { 
 
    float: left; 
 
} 
 
/* Request Action */ 
 
/* line 25, ../sass/request-details.scss */ 
 
.request-action { 
 
    margin-top: 20px; 
 
} 
 

 
/* line 28, ../sass/request-details.scss */ 
 
.request-action-header { 
 
    background: #5D5D5D; 
 
    color: #FFF; 
 
    padding: 10px 20px; 
 
    border-radius: 3px; 
 
    font-size: 18px; 
 
    font-weight: normal; 
 
} 
 

 
/* line 36, ../sass/request-details.scss */ 
 
.request-action-form { 
 
    background: #FFF; 
 
    padding: 20px; 
 
    border-width: 0 1px 1px 1px; 
 
    border-radius: 3px; 
 
    border: 1px solid #DEDEDE; 
 
} 
 

 
/* line 43, ../sass/request-details.scss */ 
 
.request-action-form .request-action-form-area { 
 
    background: #EEE; 
 
    padding: 20px; 
 
    overflow: hidden; 
 
} 
 

 
/* line 48, ../sass/request-details.scss */ 
 
.request-action-form form .button { 
 
    margin-top: 10px; 
 
} 
 

 
/* line 51, ../sass/request-details.scss */ 
 
.request-action-info { 
 
    max-height: 310px; 
 
    overflow-y: auto; 
 
    min-height: 310px; 
 
    background: #FFF; 
 
    border: 1px solid #DEDEDE; 
 
    border-bottom: 0; 
 
} 
 

 
/* line 59, ../sass/request-details.scss */ 
 
.no-history { 
 
    background: #FFF url("../images/no-history.png") center center no-repeat; 
 
    background-size: 242px 130px; 
 
} 
 

 
/* Review History */ 
 
/* line 65, ../sass/request-details.scss */ 
 
.review-history-comment { 
 
    background: #FFF; 
 
    padding: 15px 10px; 
 
    overflow: hidden; 
 
    border-bottom: 1px solid #DEDEDE; 
 
    border-width: 0 1px 1px 1px; 
 
} 
 

 
/* line 72, ../sass/request-details.scss */ 
 
.review-history-comment .comment-type { 
 
    font-weight: 600; 
 
    font-size: 15px; 
 
    color: #474747; 
 
} 
 

 
/* line 77, ../sass/request-details.scss */ 
 
.review-history-comment .comment-history { 
 
    font-weight: 600; 
 
    font-size: 15px; 
 
} 
 

 
/* line 81, ../sass/request-details.scss */ 
 
.review-history-comment .comment-history.approved { 
 
    color: #4E8A0B; 
 
} 
 

 
/* line 84, ../sass/request-details.scss */ 
 
.comment-by a, .comment-date { 
 
    font-size: 12px; 
 
    padding-right: 10px; 
 
    margin-top: 5px; 
 
    display: inline-block; 
 
} 
 

 
/* line 90, ../sass/request-details.scss */ 
 
.review-history-comment-data { 
 
    margin-left: 10px; 
 
} 
 

 
/* line 93, ../sass/request-details.scss */ 
 
.myList-overflow { 
 
    overflow: hidden; 
 
} 
 

 
/* line 96, ../sass/request-details.scss */ 
 
.review-history-comment-desc { 
 
    display: none; 
 
    padding-top: 10px; 
 
    margin-left: 10px; 
 
    word-break: break-all; 
 
    position: relative; 
 
} 
 

 
.show-comments { 
 
    display: block; 
 
} 
 

 
/* line 103, ../sass/request-details.scss */ 
 
.review-history-comment-icons.icon-rotate i { 
 
    transform: rotate(-180deg); 
 
    position: relative; 
 
    top: 14px; 
 
    right: -3px; 
 
} 
 

 
/* line 109, ../sass/request-details.scss */ 
 
.review-history-comment-icons:hover { 
 
    cursor: hand; 
 
    cursor: pointer; 
 
} 
 

 
/* line 113, ../sass/request-details.scss */ 
 
.review-history-comment-icons i { 
 
    color: #048EC2; 
 
    height: 20px; 
 
    width: 20px; 
 
    font-size: 22px; 
 
    padding: 5px; 
 
    margin-right: 10px; 
 
} 
 

 
/* line 121, ../sass/request-details.scss */ 
 
.review-history-comment-footer { 
 
    background: #FFF; 
 
    border: 1px solid #DEDEDE; 
 
    border-width: 0 1px 1px 1px; 
 
    border-radius: 3px; 
 
    font-size: 14px; 
 
    font-weight: 600; 
 
    color: #9B9B9B; 
 
    padding: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="request-action"> 
 
    <h4 class="request-action-header">Review History</h4> 
 
    <div class="request-action-info"> 
 
    <ul id="myList" class="myList-overflow"> 
 
     <li> 
 
     <div class="review-history-comment"> 
 
      <div class="review-history-comment-icons align-left"> 
 
      <i class="fa fa-check fa-lg" aria-hidden="true"></i> 
 
      <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-data align-left"> 
 
      <span class="comment-type">OCO Clearance: </span><span class="comment-history approved">Approved</span> 
 
      <br> 
 
      <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
      </div> 
 
      <div class="review-history-comment-icons text-right icon-rotate"> 
 
      <i class="fa fa-angle-down fa-2x" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-desc clear"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="review-history-comment"> 
 
      <div class="review-history-comment-icons align-left"> 
 
      <i class="fa fa-commenting fa-lg" aria-hidden="true"></i> 
 
      <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-data align-left"> 
 
      <span class="comment-type">Referral Comment </span> 
 
      <br> 
 
      <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="review-history-comment"> 
 
      <div class="review-history-comment-icons align-left"> 
 
      <i class="fa fa-check fa-lg" aria-hidden="true"></i> 
 
      <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-data align-left"> 
 
      <span class="comment-type">OCO Clearance: </span><span class="comment-history approved">Approved</span> 
 
      <br> 
 
      <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
      </div> 
 
      <div class="review-history-comment-icons text-right icon-rotate"> 
 
      <i class="fa fa-angle-down fa-2x" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-desc clear"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="review-history-comment"> 
 
      <div class="review-history-comment-icons align-left"> 
 
      <i class="fa fa-commenting fa-lg" aria-hidden="true"></i> 
 
      <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-data align-left"> 
 
      <span class="comment-type">Referral Comment </span> 
 
      <br> 
 
      <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="review-history-comment"> 
 
      <div class="review-history-comment-icons align-left"> 
 
      <i class="fa fa-check fa-lg" aria-hidden="true"></i> 
 
      <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-data align-left"> 
 
      <span class="comment-type">OCO Clearance: </span><span class="comment-history approved">Approved</span> 
 
      <br> 
 
      <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
      </div> 
 
      <div class="review-history-comment-icons text-right icon-rotate"> 
 
      <i class="fa fa-angle-down fa-2x" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-desc clear"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
      </div> 
 
     </div> 
 
     </li> 
 
     <li> 
 
     <div class="review-history-comment"> 
 
      <div class="review-history-comment-icons align-left"> 
 
      <i class="fa fa-commenting fa-lg" aria-hidden="true"></i> 
 
      <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
      </div> 
 
      <div class="review-history-comment-data align-left"> 
 
      <span class="comment-type">Referral Comment </span> 
 
      <br> 
 
      <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
      </div> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="review-history-comment-footer"> 
 
    <div class="row"> 
 
    <div class="col-md-6">          
 
     Total Comments: <span class="total-count"></span> 
 
    </div> 
 
    <div class="col-md-6 text-right"> 
 
     <a href="#" id="myList-toggle">View More +</a> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div>

當用戶點擊展開任何意見（在OCO間隙右邊的箭頭），在下面的文本正在改變「少看」。

但是，與此同時，當我嘗試運行查看更多/更少的腳本時，它會失敗。 View/less應該更改以查看更多並移除溢出滾動條，但不會。

Answer 1

我更改了您的click處理程序，以避免使用toggleClass，因爲您在註釋展開箭頭上使用addClass和removeClass。

因此，如果myList-overflow類已通過展開箭頭從#myList中刪除，則toggleClass會將其退回，這是問題所在。

我還精簡了腳本中的圖標旋轉選擇器這些箭頭，因爲複選標記也在旋轉！

;）

var commentCount = $('.review-history-comment').length; 
 
    $('.total-count').html(commentCount); 
 

 
    var commentsCountLi = $('#myList').children("li").length; 
 
    if (commentsCountLi <= 0) { 
 
     $('#myList').parent('.request-action-info').addClass('no-history'); 
 
    } 
 

 
    var ul = $('#myList'), ulh = ul.height(), h = 0; 
 

 
    ul.children('li').each(function(i) { 
 
     if(i===4) { 
 
      return false; 
 
     } 
 
     h += this.offsetHeight;   
 
    }); 
 

 
    $(".review-history-comment-icons.text-right").click(function(e) { 
 
     e.preventDefault(); 
 
     $(this).toggleClass("icon-rotate"); 
 
     $(this).next(".review-history-comment-desc").toggle();   
 
     if ("$('#myList'):hasClass(.myList-overflow)") { 
 
     $("#myList").removeClass("myList-overflow");   
 
     } 
 
     if ($(".review-history-comment-desc").is(':visible')) { 
 
     $("#myList").removeClass("myList-overflow"); 
 
      $('#myList-toggle').text("View Less -"); 
 
      if ($('#myList-toggle').text("View Less -")) { 
 
      $("#myList").removeClass("myList-overflow"); 
 
      } 
 
     } 
 
     else if ($(".review-history-comment-desc").is(':hidden')){ 
 
     $("#myList").addClass("myList-overflow"); 
 
     ul.animate({'height':h+'px'}); 
 
     $('#myList-toggle').text("View More +"); 
 
     } 
 
    }); 
 

 
    // =========================================== HERE ARE ALL CHANGES 
 
    ul.css({'height':h+'px'}); 
 
    $('#myList-toggle').click(function() { 
 
    
 
     if($(this).text() === "View More +"){ 
 
     $(this).text("View Less -") 
 
     $("#myList").removeClass("myList-overflow"); 
 
     ul.animate({'height':ulh+'px'}); 
 
     }else{ 
 
     $(this).text("View More +"); 
 
     $("#myList").addClass("myList-overflow"); 
 
     $(".review-history-comment-desc").hide(); 
 
     $(".review-history-comment-icons.text-right").addClass("icon-rotate"); 
 
     ul.animate({'height':h+'px'}); 
 
     } 
 
     // =========================================== 
 
     return false; 
 
    });

.align-right { 
 
     float: right; 
 
    } 
 

 
    ol, ul { 
 
     list-style: none; 
 
    } 
 

 
    .clear { 
 
     clear: both; 
 
    } 
 

 
    /* line 49, ../sass/base.scss */ 
 
    .align-left { 
 
     float: left; 
 
    } 
 
    /* Request Action */ 
 
    /* line 25, ../sass/request-details.scss */ 
 
    .request-action { 
 
     margin-top: 20px; 
 
    } 
 

 
    /* line 28, ../sass/request-details.scss */ 
 
    .request-action-header { 
 
     background: #5D5D5D; 
 
     color: #FFF; 
 
     padding: 10px 20px; 
 
     border-radius: 3px; 
 
     font-size: 18px; 
 
     font-weight: normal; 
 
    } 
 

 
    /* line 36, ../sass/request-details.scss */ 
 
    .request-action-form { 
 
     background: #FFF; 
 
     padding: 20px; 
 
     border-width: 0 1px 1px 1px; 
 
     border-radius: 3px; 
 
     border: 1px solid #DEDEDE; 
 
    } 
 

 
    /* line 43, ../sass/request-details.scss */ 
 
    .request-action-form .request-action-form-area { 
 
     background: #EEE; 
 
     padding: 20px; 
 
     overflow: hidden; 
 
    } 
 

 
    /* line 48, ../sass/request-details.scss */ 
 
    .request-action-form form .button { 
 
     margin-top: 10px; 
 
    } 
 

 
    /* line 51, ../sass/request-details.scss */ 
 
    .request-action-info { 
 
     max-height: 310px; 
 
     overflow-y: auto; 
 
     min-height: 310px; 
 
     background: #FFF; 
 
     border: 1px solid #DEDEDE; 
 
     border-bottom: 0; 
 
    } 
 

 
    /* line 59, ../sass/request-details.scss */ 
 
    .no-history { 
 
     background: #FFF url("../images/no-history.png") center center no-repeat; 
 
     background-size: 242px 130px; 
 
    } 
 

 
    /* Review History */ 
 
    /* line 65, ../sass/request-details.scss */ 
 
    .review-history-comment { 
 
     background: #FFF; 
 
     padding: 15px 10px; 
 
     overflow: hidden; 
 
     border-bottom: 1px solid #DEDEDE; 
 
     border-width: 0 1px 1px 1px; 
 
    } 
 

 
    /* line 72, ../sass/request-details.scss */ 
 
    .review-history-comment .comment-type { 
 
     font-weight: 600; 
 
     font-size: 15px; 
 
     color: #474747; 
 
    } 
 

 
    /* line 77, ../sass/request-details.scss */ 
 
    .review-history-comment .comment-history { 
 
     font-weight: 600; 
 
     font-size: 15px; 
 
    } 
 

 
    /* line 81, ../sass/request-details.scss */ 
 
    .review-history-comment .comment-history.approved { 
 
     color: #4E8A0B; 
 
    } 
 

 
    /* line 84, ../sass/request-details.scss */ 
 
    .comment-by a, .comment-date { 
 
     font-size: 12px; 
 
     padding-right: 10px; 
 
     margin-top: 5px; 
 
     display: inline-block; 
 
    } 
 

 
    /* line 90, ../sass/request-details.scss */ 
 
    .review-history-comment-data { 
 
     margin-left: 10px; 
 
    } 
 

 
    /* line 93, ../sass/request-details.scss */ 
 
    .myList-overflow { 
 
     overflow: hidden; 
 
    } 
 

 
    /* line 96, ../sass/request-details.scss */ 
 
    .review-history-comment-desc { 
 
     display: none; 
 
     padding-top: 10px; 
 
     margin-left: 10px; 
 
     word-break: break-all; 
 
     position: relative; 
 
    } 
 

 
    .show-comments { 
 
     display: block; 
 
    } 
 

 
    /* line 103, ../sass/request-details.scss */ 
 
    .review-history-comment-icons.icon-rotate i { 
 
     transform: rotate(-180deg); 
 
     position: relative; 
 
     top: 14px; 
 
     right: -3px; 
 
    } 
 

 
    /* line 109, ../sass/request-details.scss */ 
 
    .review-history-comment-icons:hover { 
 
     cursor: hand; 
 
     cursor: pointer; 
 
    } 
 

 
    /* line 113, ../sass/request-details.scss */ 
 
    .review-history-comment-icons i { 
 
     color: #048EC2; 
 
     height: 20px; 
 
     width: 20px; 
 
     font-size: 22px; 
 
     padding: 5px; 
 
     margin-right: 10px; 
 
    } 
 

 
    /* line 121, ../sass/request-details.scss */ 
 
    .review-history-comment-footer { 
 
     background: #FFF; 
 
     border: 1px solid #DEDEDE; 
 
     border-width: 0 1px 1px 1px; 
 
     border-radius: 3px; 
 
     font-size: 14px; 
 
     font-weight: 600; 
 
     color: #9B9B9B; 
 
     padding: 15px; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="request-action"> 
 
     <h4 class="request-action-header">Review History</h4> 
 
     <div class="request-action-info"> 
 
     <ul id="myList" class="myList-overflow"> 
 
      <li> 
 
      <div class="review-history-comment"> 
 
       <div class="review-history-comment-icons align-left"> 
 
       <i class="fa fa-check fa-lg" aria-hidden="true"></i> 
 
       <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-data align-left"> 
 
       <span class="comment-type">OCO Clearance: </span><span class="comment-history approved">Approved</span> 
 
       <br> 
 
       <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
       </div> 
 
       <div class="review-history-comment-icons text-right icon-rotate"> 
 
       <i class="fa fa-angle-down fa-2x" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-desc clear"> 
 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="review-history-comment"> 
 
       <div class="review-history-comment-icons align-left"> 
 
       <i class="fa fa-commenting fa-lg" aria-hidden="true"></i> 
 
       <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-data align-left"> 
 
       <span class="comment-type">Referral Comment </span> 
 
       <br> 
 
       <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="review-history-comment"> 
 
       <div class="review-history-comment-icons align-left"> 
 
       <i class="fa fa-check fa-lg" aria-hidden="true"></i> 
 
       <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-data align-left"> 
 
       <span class="comment-type">OCO Clearance: </span><span class="comment-history approved">Approved</span> 
 
       <br> 
 
       <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
       </div> 
 
       <div class="review-history-comment-icons text-right icon-rotate"> 
 
       <i class="fa fa-angle-down fa-2x" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-desc clear"> 
 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="review-history-comment"> 
 
       <div class="review-history-comment-icons align-left"> 
 
       <i class="fa fa-commenting fa-lg" aria-hidden="true"></i> 
 
       <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-data align-left"> 
 
       <span class="comment-type">Referral Comment </span> 
 
       <br> 
 
       <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="review-history-comment"> 
 
       <div class="review-history-comment-icons align-left"> 
 
       <i class="fa fa-check fa-lg" aria-hidden="true"></i> 
 
       <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-data align-left"> 
 
       <span class="comment-type">OCO Clearance: </span><span class="comment-history approved">Approved</span> 
 
       <br> 
 
       <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
       </div> 
 
       <div class="review-history-comment-icons text-right icon-rotate"> 
 
       <i class="fa fa-angle-down fa-2x" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-desc clear"> 
 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
       </div> 
 
      </div> 
 
      </li> 
 
      <li> 
 
      <div class="review-history-comment"> 
 
       <div class="review-history-comment-icons align-left"> 
 
       <i class="fa fa-commenting fa-lg" aria-hidden="true"></i> 
 
       <i class="fa fa-user-circle fa-lg" aria-hidden="true"></i> 
 
       </div> 
 
       <div class="review-history-comment-data align-left"> 
 
       <span class="comment-type">Referral Comment </span> 
 
       <br> 
 
       <span class="comment-by"><a href="#">Kunal Vijan</a></span><span class="comment-date">12/22/2016</span> 
 
       </div> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <div class="review-history-comment-footer"> 
 
     <div class="row"> 
 
     <div class="col-md-6">          
 
      Total Comments: <span class="total-count"></span> 
 
     </div> 
 
     <div class="col-md-6 text-right"> 
 
      <a href="#" id="myList-toggle">View More +</a> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    </div>