Portfolio - Components

View All Components

Component: 

Features:

  1. theme colors
  2. open/closed states

Notes:

  1. open first toggle  to lead user


 

Watch Short Video

Toggle

item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget ligula vitae urna pharetra egestas. Suspendisse sed nunc dolor. Phasellus non varius nulla

item 2

Closed - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget ligula vitae urna pharetra egestas. Suspendisse sed nunc dolor. Phasellus non varius nulla

paragraph--toggle-repeater.html.twig

 
{% set theme = paragraph.field_theme_color.value %}


{% block paragraph %}

<div class="toggle toggle-{{ theme }} toggle-simple" data-plugin-toggle>

    {% block content %}

       {{ content|without('field_theme_color') }}

    {% endblock %}

</div>

{% endblock paragraph %}
paragraph--toggle.html.twig

 
{% block paragraph %}

    {% block content %}

	<section class="toggle {% if paragraph.field_open_state.value == '1' %}active{% endif %}">

		<a class="toggle-title">{{ content.field_toggle_title }}</a>

		<div class="toggle-content">

			{{ content.field_toggle_text }}

		</div>

	</section>

    {% endblock %}

{% endblock paragraph %}