How to render html tags in field collection items?

Question

How is it possible to render also the html tags of a field collection item? If i do something like this in a textfield (Full html) of an item:

<div class="test">TEST</div>

I also get this in frontend, with no rendered html tags.

Node Theme:

<div id="accordion" class="panel-group">
{% for details in node.field_cv %}
<div class="panel panel-default">   
<div class="panel-heading">
<h4 class="panel-title">
<a class="panel-toggle " data-toggle="collapse" data-parent="#accordion" href="#content">
<span>{{ details.getFieldCollectionItem().field_cv_title.value }}</span>
</a>
</h4>
</div><!-- /.panel-heading -->
<div id="content" class="panel-collapse collapse">
<div class="panel-body">
{{ details.getFieldCollectionItem().field_cv_details.value }}
</div><!-- /.panel-body -->
</div><!-- /.content -->
</div><!-- /.panel -->
{% endfor %}
</div>

Thanks for helping!

Answer 1

When you use Field Collection you get nested templates. So start with the outer div container in the node template:

<div id="accordion" class="panel-group">
  {{ content.field_cv }}
</div>

This produces a new set of templates, which you can see when you switch on Twig Debug. The next level is the field template:

field--field-cv.html.twig

{% if label_hidden %}
  {% if multiple %}
    <div{{ attributes }}>
      {% for item in items %}
        <div{{ item.attributes }}>{{ item.content }}</div>
      {% endfor %}
    </div>
  {% else %}
    {% for item in items %}
      <div{{ attributes }}>{{ item.content }}</div>
    {% endfor %}
  {% endif %}
{% else %}
  <div{{ attributes }}>
    <div{{ title_attributes }}>{{ label }}</div>
    {% if multiple %}
      <div>
    {% endif %}
    {% for item in items %}
      <div{{ item.attributes }}>{{ item.content }}</div>
    {% endfor %}
    {% if multiple %}
      </div>
    {% endif %}
  </div>
{% endif %}

and inside you'll find the field collection templates:

field.collection.html.twig

{%
  set classes = [
    'field-collection-item',
    'field-collection-item--name-' ~ field_collection_item.name|clean_class,
    'field-collection-item--view-mode-' ~ field_collection_item.view_mode|clean_class,
  ]
%}
<div{{ attributes.addClass(classes) }}>
  <div class="content"{{ content_attributes }}>
    {{ content }}
  </div>
</div>

Which you all can use for the custom html markup.