Template ce_accordionSingle -> span.ui-icon entfernen

[mdoll]

Hallo,

ich möchte gerne das Template ce_accordionSingle.html5 für das Contao Akkordion manipulieren.

<section class="<?= $this->class ?> ce_accordion ce_text block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>

  <div class="<?= $this->toggler ?>"<?php if ($this->headlineStyle): ?> style="<?= $this->headlineStyle ?>"<?php endif; ?>>
    <?= $this->headline ?>
  </div>

  <div class="<?= $this->accordion ?>">
    <div>
      <?php if (!$this->addBefore): ?>
        <?= $this->text ?>
      <?php endif; ?>

      <?php if ($this->addImage): ?>
        <?php $this->insert('image', $this->arrData); ?>
      <?php endif; ?>

      <?php if ($this->addBefore): ?>
        <?= $this->text ?>
      <?php endif; ?>
    </div>
  </div>

</section>

Wenn ich das richtig sehe, dann generiert <?= $this->headline ?> im Frontend vor dem Inhalt der Breichsüberschrift ein leeres Spanelement:

<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>

Dieses span würde ich gerne entfernen. Geht das irgendwie? Das wäre für mich eleganter, als das per display:none; auszublenden.


Danke und Gruß
Mathias

[fiedsch]

Wenn ich das richtig sehe, dann generiert <?= $this->headline ?> im Frontend vor dem Inhalt der Breichsüberschrift ein leeres Spanelement:

<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>

ich denke, da liegst Du falsch und das wird von Accordion JS generiert: https://github.com/contao-components...ery-ui.js#L937

Daher wäre der Ansatzpunkt https://api.jqueryui.com/accordion/

[mdoll]

Hi,

vielen Dank für den Hinweis und den Link zur Doku! Super, dann war das einfach.

Template j_accordion.html5

<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
  jQuery(function($) {
    $(document).accordion({
      // Put custom options here

      // remove span for icons
      icons: false,

      heightStyle: 'content',
      header: '.toggler',
      collapsible: true,
      create: function(event, ui) {
        ui.header.addClass('active');
        $('.toggler').attr('tabindex', 0);
      },
      activate: function(event, ui) {
        ui.newHeader.addClass('active');
        ui.oldHeader.removeClass('active');
        $('.toggler').attr('tabindex', 0);
      }
    });
  });
</script>