Skip to content

Remove borders in the "accordion" #23836

@SamThilmany

Description

@SamThilmany

At the moment the accordion doesn't look very good. It isn't very difficult to fix this, but I think it could be a nice feature to include in one of the next updates.

Here is how the accordion currently looks (BS4 Documentation):

Accordion

If the card is neither the first, nor the last one in the list, there should be no border radius. Moreover one of the borders (top or bottom) should be set to 0px.
This was already kind of made for vertical button groups.

This is my proposal for a fix:

.card:not(:first-of-type):not(:last-of-type) {
    border-bottom: none;
    border-radius: none;
}

.card:first-of-type {
    border-bottom-left-radius: none;
    border-bottom-right-radius: none;
}

.card:last-of-type {
    border-top-left-radius: none;
    border-top-right-radius: none;
}

This results in a much nicer accordion:

Accordion fixed

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions