JSFiddle - React, Tailwind, and code Playground

by Rasmus Bergström

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<span id="original-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

CSS

p.collapse.in, #first {
    display:inline;
}

JavaScript

// String manipulation
// Set the number of equal parts to split the text into
var n = 5;
// get the object which text we want
var orig_object = $('#original-text');
// get the text
var orig_text = orig_object.text();
// split it into an array
var words = orig_text.split(' ');
// get the length of the array
var amount = words.length;
// divide the amount in two halfs with even number
// where the second_half gets the odd one out
var first_part = Math.floor(amount / n);
var remainder = amount % n;
var second_part = (first_part * (n - 1)) + remainder;
// construct sentence of the array
var first_sentence = words.slice(0, first_part).join(' ');
var dots = '<span id="dots">...</span> ';
var sencond_sentence = words.slice(first_part, first_part + second_part).join(' ');
// combine the two sentences in separate p-tags in the div
orig_object.html('<p id="first">' + first_sentence + dots + '<a data-target="#second" data-toggle="collapse" id="read-more"><i class="fa fa-chevron-down"></i></a></p>' + '<p class="collapse" id="second">' + sencond_sentence + '</p>');
// / String manipulation

// Collapse the text
var p_collapse = $('.collapse');
var p_first = $('#first');
var p_second = $('#second');
var link = $('#read-more');
$('.collapse').on('show.bs.collapse', function () {
    var trigger = $('#read-more i')
    $(link).remove();
    $('a', p_first).remove();
    $(p_collapse).append('<a data-target="#second" data-toggle="collapse" id="read-more"> <i class="fa fa-chevron-up"></i> </a>');
    $('#dots').addClass('hidden');
}).on('hide.bs.collapse', function () {
    var trigger = $('#read-more i')
    $(p_first).append('<a data-target="#second" data-toggle="collapse" id="read-more"><i class="fa fa-chevron-down"></i></a>')
    $('a', p_second).remove();
    $('#dots').removeClass('hidden');
});
// / Collapse the text