accordion.css

.accordion {
    background: #EFEFEF;
    border: 1px solid #dddddd;
    border-radius: 6px;
}

.accordion .item-title {
    cursor: pointer;
    padding: 12px;
    border-bottom: 1px solid #dddddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion .item-title:after {
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #a7a7a7;
    border-right: 2px solid #a7a7a7;
    transform-origin: 75% 75%;
    transform: rotate(-45deg) translateY(-50%);
    transition: transform .1s ease;
    content: '';
}

.accordion .item-title.open {
    background: #dddddd;
}

.accordion .item-title.open::after {
    transform: rotate(-135deg) translateX(50%);
}

.accordion .item-content {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #dddddd;
}

.accordion .item-title.open + .item-content {
    display: grid;
}