Implementing with PHP

The component can be called by creating a render array for text_dropdown as follows:

$build['my_dropdown'] = [
  '#theme' => 'text_dropdown',
  '#toggle' => 'Text for the toggle',
  '#classes' => ['my-extra-class'], // optional
  '#content' => [
    '#markup' => 'The text that should be shown when clicked',
  ],
];

Implementing in Twig directly

It is also possible to recreate the HTML semantics of the text-dropdown component in any template and attach the library to that template as follows:

{% extends 'taxonomy-term.html.twig' %}

{% block content %}
  {{ attach_library("compony/text-dropdown") }}
  <div {{ attributes.addClass(classes).addClass('text-dropdown') }}>
    <button type="button" class="text-dropdown__toggle">
      <span>{{ name }}</span>
      <svg viewBox="0 0 22 14" xmlns="http://www.w3.org/2000/svg"><path d="M21.542 2.904L19.075.402l-8.106 8.223L2.863.402.396 2.904l10.573 10.727z" fill="#333"/></svg>
    </button>

    <div class="text-dropdown__content">
      {{ content }}
    </div>
  </div>
{% endblock %}

Example is from implementing the text-dropdown functionality directly around a the contents of a teaser view-mode of a taxonomy term.