{% block element_cytex_text_show_more %} <div class="cms-element-cytex-text-show-more"> {% if element.config.headline.value != '' %}<h2 class="cytex-text-show-more-headline">{{ element.config.headline.value }}</h2>{% endif %} {% if element.config.text.value != '' %} <div class="d-none d-lg-block"> {% set textBreakLength = element.config.desktopLength.value %} {% block element_cytex_text_show_more_text %} {% if element.config.showMore.value and element.config.text.value|length > textBreakLength %} <div class="collapse show cytex-text-show-more-collapse"> <p class="cytex-text-show-more-text cytex-text-show-more-short">{{ element.config.text.value|slice(0,textBreakLength) }} ...</p> <button class="btn cytex-btn-link-primary p-0 cytex-text-show-more-button" data-toggle="collapse" data-target=".cytex-text-show-more-collapse" aria-expanded="false" aria-controls="collapseExample"> {{ "cytex-theme.cms.cytex-text-show-more"|trans|sw_sanitize }}</button> </div> <div class="collapse cytex-text-show-more-collapse"> <p class="cytex-text-show-more-text">{{ element.config.text.value|raw }}</p> </div> {% else %} <p class="cytex-text-show-more-text">{{ element.config.text.value|raw }}</p> {% endif %} {% endblock %} </div> <div class="d-block d-lg-none"> {% set textBreakLength = element.config.mobileLength.value %} {{ block('element_cytex_text_show_more_text') }} </div> {% endif %} </div>{% endblock %}