PHP
<?php
add_filter('render_block_core/accordion-item', function($html) {
$svg_closed = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>';
$svg_open = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/></svg>';
$icon = '<span class="accordion-icon accordion-icon--closed" aria-hidden="true">' . $svg_closed . '</span>'
. '<span class="accordion-icon accordion-icon--open" aria-hidden="true">' . $svg_open . '</span>';
return str_replace(
'<span class="wp-block-accordion-heading__toggle-icon" aria-hidden="true">+</span>',
$icon,
$html
);
});CSS
.wp-block-accordion-item,
.wp-block-accordion-panel {
margin-top: 0 !important;
}
.is-open .wp-block-accordion-panel {
margin-bottom: 15px !important;
}
.wp-block-accordion-heading__toggle {
padding-top: 0 !important;
padding-bottom: 12px !important;
}
.is-open .wp-block-accordion-heading__toggle {
padding-bottom: 6px !important;
}
.accordion-icon {
transition: opacity 0.3s, transform 0.3s;
}
.accordion-icon--open {
display: none;
}
/* Geöffnet */
[aria-expanded="true"] .accordion-icon--closed { display: none; }
[aria-expanded="true"] .accordion-icon--open { display: inline-block; }
/* Animation */
[aria-expanded="true"] .accordion-icon--open svg {
animation: rotate-in 0.3s ease forwards;
}
@keyframes rotate-in {
from { transform: rotate(-90deg); opacity: 0; }
to { transform: rotate(0deg); opacity: 1; }
}