Split text in two paragraphs with twig - twig

Question

I have rich text generated with Twig. The text is divided into two paragraphs.
How do I create a read more function/button where the first paragraph is displayed and the second will be visible on a button click?
I thought something like this:
{% set paragraphs = content | split('</p>') %}
{% set firstParagraph = paragraphs | first ~ '</p>' %}
{% set secondParagraph = paragraphs[:2] ~ '</p>' %}
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle custom-title" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"></a>
<p>{{ firstParagraph | raw }}</p>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<p>{{ secondParagraph | raw }}</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.SeeMore2').click(function(){
var $this = $(this);
$this.toggleClass('SeeMore2');
if($this.hasClass('SeeMore2')){
$this.text('{{ 'Read more' | t }}');
} else {
$this.text('{{ 'Read less' | t }}');
}
});
});
</script>
<a class="SeeMore2" data-toggle="collapse" href="#collapseTwo">{{ 'Read more' | t }}</a>
The problem is that the second paragraph returns array as response.

Answer 1

You are using slice, which is actually using array_slice, which returns array.
If you want to get just one element then you can use php syntax:
{% set paragraphs = content | split('</p>') %}
{% set firstParagraph = paragraphs[0] ~ '</p>' %}
{% set secondParagraph = paragraphs[1] ~ '</p>' %}
Please read more about twig syntax and variables here.