Template ce_accordionSingle -> span.ui-icon entfernen

Hallo,

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

PHP-Code:

---

<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:

HTML-Code:

---

<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

Zitat:

---

Zitat von mdoll

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

HTML-Code:

---

<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/

Hi,

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

Template j_accordion.html5

Code:

---

<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>

---