JSFiddle - React, Tailwind, and code Playground

by Claudius

HTML

<h2>Header 1</h2>
<p class='show_hide_section default_off'>paragraph 11 asdfdsf</p>
<p>1<span class='truncator' data-name="first-test" data-truncate='true'></span>2<a href=''>3</a> <i>a</i>sdf </p>
<p>adsf</p>

<h2>Header 2</h2>
<p>test <span class='truncator' data-name="first-test" data-truncate='false'></span> 2 <a href=''>adsf</a></p>
<p>paragraph 2.2</p>
<p>paragraph 2.3</p>

CSS

p.show_hide_section ~ p  {
    
}

.p_rest {
    border: 1px dotted silver;
}

JavaScript

var CTruncatorTag = 'truncator';
$(document).ready(function() {
    initTruncator();
    $('a.show_more', 'p').live('click', function(e) {
        e.preventDefault();
        showP($(this).parents('p'));
        $(this).parents('p').nextUntil(':not(p)').each(function() {
            showP($(this));
        });
        $(this).hide();
        ajax_truncator('test', true);

    });
    $('a.show_less', 'p').live('click', function(e) {
        e.preventDefault();
        var foundstart = hideP($(this).parents('p'));
        $(this).parents('p').prevUntil(':not(p)').each(function() {
            if (!foundstart) {
                foundstart = hideP($(this));
            }
        });
        $(this).hide();
    })

});

function hideP(p) {
    var isstart = ($(p).children('a.show_more').size() > 0);
    if (isstart) {
        $(p).children('a.show_more').show();
        $(p).children('span.p_rest').hide();
    } else {
        $(p).hide();
    }
    return isstart;
}

function showP(p) {
    $(p).fadeIn();
    $(p).children('span.p_rest').show();
    $(p).children('a.show_less').show();
}

function addMore(e) {
    if ($(e).replaceWith(a_more)) {
        var aparts = $(e).text().split(CTruncatorTag);
        var newstr = aparts[0] + a_more;
        if (aparts.length == 2) {
            newstr = newstr + "<span class='p_rest'>" + aparts[1] + "</span>";
        }
        $(e).html(newstr);
    }
}

function initTruncator() {


    $('p span.truncator').each(function() {
        var name = $(this).data('name');
        var truncate = $(this).data('truncate');
        var a_less = $('<a>').prop('text', 'show less...').addClass('truncator_less').prop('href', '?key=' + name + '&hide=true');
        var a_more = $('<a>').prop('text', 'show more...').addClass('truncator_more').prop('href', '?key=' + name + '&hide=false');
        
        
        var p = $(this).parents('p').clone();
        p.children('span.truncator').replaceWith('[split]');
        var aParts =...