Styling Accordions in CSS


Use CSS to style details and summary elements for a simple accordion without JavaScript.

Source Code

details > summary {
    cursor: pointer;
    color: #0056b3;
}
details[open] > summary {
    color: #d9534f;
}
details > p {
    padding-left: 20px;
}
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments