Custom class in Accordion

Hi, I need to change the style of accordion's content. Padding specifically. I've tried adding my custom class to RadzenAccordion and RadzenAccordionItem but it doesn't work. It's placed into another div. The class I need to replace is 'rz-accordion-content'. Any clue? Thanks.

 <RadzenAccordion Multiple="false">
                    <Items >
                        <RadzenAccordionItem class="rz-accordion-content-class" Text=@localizer["docresponsibilitiesaccordionheader"] Icon="files" Selected=@bResponsibility Style="@sStyleResponsibility">
                            <table class="table" style="width: 100%; word-wrap: break-word; table-layout: fixed;">
                                <thead style="font-size:12px;">
                                    <tr>
                                        <th>@localizer["docresponsibilitiesaccordiontableheadername"]</th>                                        
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var docResp in documentResponsibilities)
                                    {
                                        <tr>
                                            <td><b>@docResp.Name</b></td>                                           
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </RadzenAccordionItem>
                    </Items>
                </RadzenAccordion>

You can combine selectors to target that specific class - for example adjacent and child selectors.

.rz-accordion-content-class + .rz-accordion-content-wrapper  .rz-accordion-content {
  padding: 20px;
}
1 Like

It worked! Thanks again.