Jetzt hab ich das {item.bodytext} in ein normales Eingabefeld umgewandelt {item.text} es ist für das nicht umbedingt ein RTE wichtig so kann ich mein eigenes <p> Tag dekorieren wie ich will.
Aber warum jetzt alle das active mitbekommen verstehe ich nicht, eine Vermutung habe ich falls das Fluidtemplate richtig ist das JS kann hir zwischenfunken...
Hier mal der ganze Code eventuell fällt ja jemand was auf:
<div class="flex-parent">
<div class="input-flex-container">
<f:for each="{data.rc_item}" as="item" iteration="iteration">
<div
class="rcinput{f:if(condition: '{(iteration.cycle - 1) == iteration.index}', then: ' active', else: '')}">
<span data-year="{item.jahr}" data-info="{item.title}"></span>
</div>
</f:for>
</div>
<div class="description-flex-container">
<f:for each="{data.rc_item}" as="item" iteration="iteration">
<f:if condition="{item.text}">
<f:format.raw>
<p
class="{f:if(condition: '{(iteration.cycle - 1) == iteration.index}', then: 'active', else: '')}">
{item.text}
</p>
</f:format.raw>
</f:if>
</f:for>
</div>
</div>
Und das JS:
var descriptionContainer = document.querySelector('.description-flex-container');
if (descriptionContainer) {
var inputs = document.querySelectorAll('.rcinput');
var paras = descriptionContainer.querySelectorAll('p');
inputs.forEach(function (input) {
input.addEventListener('click', function () {
var index = Array.from(inputs).indexOf(input);
var matchedPara = paras[index];
inputs.forEach(function (input) {
input.classList.remove('active');
});
paras.forEach(function (para) {
para.classList.remove('active');
});
input.classList.add('active');
matchedPara.classList.add('active');
});
});
};
