How to leave the accordeon closed when loading the page

[witzker]

Hi, I found This, but I don't know how to set the accordeon closed https://pdir.de/docs/de/contao/themes/zeroone/elements/accordions/ When I set this as read in a contao forum, it does not work any more

I hope you can tell me what to put where to achieve this Many THX

PS: Is there also the possibility to have some "arrow down" so also inexperienced user can see that there is more info on the website when he clicks on it?

[seibtph]

Add the following line to the j_accordion.html5 template: active: false,

e.g.

<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
  jQuery(function($) {
    $(document).accordion({
      // Put custom options here
      heightStyle: 'content',
      header: '.toggler',
      active: false,
      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>

[seibtph]

Here is a example to add arrows for the accordion. We can add this as feature to the next theme version.

Font Awesome is included, so you can use this icons.

.ui-accordion-header {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;

    .ui-accordion-header-icon:before {
        content: "\f063";
        font: var(--fa-font-solid);
    }

    &.active .ui-accordion-header-icon:before {
        content: "\f062";
    }
}

Feel free to reopen the issue if you have more questions.