Accordion

{% set rnd4 = [0,1,2,3] | random %}

{% if not(title) %}
{% set title = [
  'Lorem ipsum dolor sit amet',
  'Duis aute irure dolor in reprehenderit in voluptate',
  'Ut enim ad minim veniam, quis nostrud',
  'Nonumy eirmod tempor invidunt ut anamen'
][rnd4] %}
{% endif %}

{% if not(text_long) %}
{% set text_long = [
  '<p>Lorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitament. Lorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitamentLorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitamentLorem ipsum Dolor sitamentlore molor sitament rem ipsum Loro sitament.</p>',
  '<p>Donec aliquet lacus vel nunc euismod dictum ornare quis augue. Aliquam vel laoreet ligula, nec vehicula justo. Morbi venenatis porttitor mauris, id iaculis risus rhoncus eget. Maecenas egestas ultricies ipsum nec tempus. Aliquam ultricies mauris at erat porttitor, et posuere orci egestas.</p>',
  '<p>Sed sed urna turpis. Sed vel varius ex. Suspendisse semper erat quis risus dignissim ultrices. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</p>',
  '<p>Quisque et nisi purus. Nulla massa erat, rutrum ac sagittis ut, pharetra vel risus. Duis tortor justo. Suspendisse pulvinar eros id nisi fringilla sodales. Morbi nunc leo, finibus tincidunt tortor ut.</p>'
][rnd4] %}
{% endif %}

{% set uid = getUID() %}

<div class="c-accordion has-border-bottom">

  <div class="c-accordion__heading" ui-toggle="{{ uid }}">
    <h4 class="text-style-p-em">{{ title }}</h4>
    <span ui-toggle-icon>
      <span aria-hidden>{% render '@svg', { name: 'tri-up' } %}</span>
      <span>{% render '@svg', { name: 'tri-down' } %}</span>
    </span>
  </div>

  <div id="{{ uid }}" ui-toggle-target aria-hidden>{{ text_long | safe }}</div>

</div>