if div height > x, addclass, onclick removeclass

by mrjordy

HTML

<div dir="" class="ms-cellstyle ms-vb2">Not prompting authetication even after clearing all caches, restarting computer. SP Permissions are still in place but CAC authetication does not seem to be enabled. Ryan says hes not able to recreate it in the Yard. FWI computers in Norfolk are experiencing this event.Not prompting authetication even after clearing all caches, restarting computer. SP Permissions are still in place but CAC authetication does not seem to be enabled. Ryan says hes not able to recreate it in the Yard. FWI computers in Norfolk are experiencing this event.</div>

<br>asdf<br><br>

<div dir="" class="ms-cellstyle ms-vb2">Not prompting authetication even after clearing all caches, restarting computer. SP Permissions are still in place but CAC authetication does not seem to be enabled. Ryan says hes not able to recreate it in the Yard. FWI computers in Norfolk are experiencing this event.</div>

<br>asdf<br><br>

<div dir="" class="ms-cellstyle ms-vb2">Not this event.</div>

<br>asdf<br><br>

<div dir="" class="ms-cellstyle ms-vb2">Not prompting authetication even after clearing all caches, restarting computer. SP Permissions are still in place but CAC authetication does not seem to be enabled. Ryan says hes not able to recreate it in the Yard. FWI computers in Norfolk are experiencing this event.Not prompting authetication even after clearing all caches, restarting computer. SP Permissions are still in place but CAC authetication does not seem to be enabled. Ryan says hes not able to recreate it in the Yard. FWI computers in Norfolk are experiencing this event.</div>

CSS

.ms-cellstyle.ms-vb2 {
display: block;
position: relative;
border: 1px solid #ccc;
max-width: 280px;
}

.showMore {
  max-height: 65px;
  overflow: hidden;
  border-bottom: 1px solid black !important;
  pointer-events: none;
}

.showMore:before {
    content: '[+]';
    font-size: 9px;
    background: blue;
    padding: 3px;
    color: white;
    cursor: pointer;
    vertical-align: top;
    margin-right: 6px;
    pointer-events: auto;
}

.showMore:hover:before {
    background: #ff4500;
}
.makeWider {
  max-width: 400px !important;
}

JavaScript

$(function() {
    $('.ms-cellstyle.ms-vb2').filter(function() {
        return $(this).outerHeight() > 200 ;
    })
    .addClass("showMore");
});

$('.showMore').click(function() {
  $(this).removeClass('showMore');
  $(this).addClass('makeWider');
});



/*
.ms-listviewtable > tbody > .ms-itmhover > .ms-vb2 > .ms-rtestate-field {}
*/