Space between Accordion Items

How can I get space (20px) between Accordion Items?  


Also, is there a list of all the styles for an accordion?


I don't want a selected item to be "highlighted" (header outlined in blue).


1 Reply

AK Ashokkumar Karuppasamy Syncfusion Team March 1, 2025 02:13 PM UTC

Hi Kevin Kraeft,

You can achieve your requirement by customizing the accordion styles to meet your needs. For your reference, we have attached a code snippet and UG documentation below. Please try the solution and let us know if you need any further assistance.

Sample: https://blazorplayground.syncfusion.com/VXBejADWeCXbkzdQ

<style>

    .accordion-item {

        margin-bottom: 20px; /* Adds 20px space between items */

    }

    .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus {

        background: none;

        box-shadow: none;

    }

</style>


UG: https://blazor.syncfusion.com/documentation/accordion/style

Regards,
Ashok


Loader.
Up arrow icon