read more

Hi there,

it requires custom development - but here is an example of the HTML required that you can add to a HTML Block:

<div class="has-read-more">
    <input type="checkbox" class="read-more-state" id="more-container-1">
    <div class="read-more-wrap">
        <p>This text is visible all of the time</p>
        <div class="read-more-target">
            <p>This text is hidden by the read more</p>
            <p>More text hidden by the read more</p>
        </div>
    </div>
    <label for="more-container-1" class="read-more-trigger"><span class="remove-more-uncheck">Read more</span><span class="remove-more-checked">Read less</span></label>
</div>

Then you add this CSS to make the read more button work:

.read-more-state {
    display: none;
}

.read-more-target {
    opacity: 0;
    max-height: 0;
    font-size: 0;
    transition: .25s ease;
}

.read-more-state:checked~.read-more-wrap .read-more-target {
    opacity: 1;
    font-size: inherit;
    max-height: 999em;
}

.read-more-state:not(:checked)~.read-more-trigger .remove-more-checked {
    display: none;
}

.read-more-state:checked~.read-more-trigger .remove-more-uncheck {
    display: none !important;
}

.read-more-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0 .5em;
    color: #666;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #ddd;
    border-radius: .25em;
}