JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<div class="comment more">
The good news…Judy re-retired from education in June & came to work in the shop doing all the custom sail work. Now we’re on the same schedule with fewer constraints. Work when needed & go play when able.


</div>
<div class="comment more">
The better news is…we’re going to be traveling most of the next couple of months. In September we’re going to Morocco to visit our daughter Jenny’s family & in October to Bonaire to continue our reef survey started in 1994. This year we’re hoping to experience & assist our scientist friends from AL document the island’s annual coral spawn. 


</div>
<div class="comment more">
The not so good news… order placed after September 5th will not ship until late October. The beauty of the internet allows you to contact us even while we’re traveling & we welcome your orders for shipping upon our return. 
</div>
 
</div>
<div class="comment more">
We’ll resume 100% operation October 22. Other than a couple of days off for Thanksgiving with our older daughter Carla’s family in IN we’ll be in the shop until Dec 24th. 
</div>

</div>
<div class="comment more">
In January 2013 we plan to close again for a couple of months while we move aboard our slow coastal trawler HEY JUDE & motor towards FL. We’ll find a safe harbor for her in late March & return to TX for our spring shows before returning to the boat in July. Again, we’ll always have internet & can accept order for shipment upon our return to the shop.  
</div>

<div class="comment more">
We’re not sure of our late 2013 schedule, maybe a repeat of 2012 or go all out & move aboard for 12 months & do the entire Great American Loop. Insert Banner text above this line 
</div>

CSS

body, input{
    font-family: Calibri, Arial;
    margin: 0px;
    padding: 0px;
}
a {
    color: #0254EB
}
a:visited {
    color: #0254EB
}
#header h2 {
    color: white;
    background-color: #00A1E6;
    margin:0px;
    padding: 5px;
}
.comment {
    width: 400px;
    background-color: #f0f0f0;
    margin: 10px;
}
a.morelink {
    text-decoration:none;
    outline: none;
}
.morecontent span {
    display: none;
 
}

JavaScript

var showChar = 115;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);

        var html = c + '<span class="moreelipses">'+ellipsestext+'</span><span class="morecontent"><span>' + h + '</span><a href="" class="morelink">'+moretext+'</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});