Nicer Styling for Details (Accordion) Blocks
Gives the Details block and other summary/details elements a clean accordion look with a border, padding and a rotating arrow.
Opens WPIDE on
Code
details {
margin: 0 0 12px;
border: 1px solid rgba(127, 127, 127, .3);
border-radius: 6px;
padding: 0 16px;
}
details > summary {
position: relative;
padding: 14px 28px 14px 0;
font-weight: 600;
cursor: pointer;
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
details > summary::after {
content: "";
position: absolute;
right: 4px;
top: 50%;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-70%) rotate(45deg);
transition: transform .2s ease;
}
details[open] > summary::after {
transform: translateY(-30%) rotate(-135deg);
}
details[open] {
padding-bottom: 14px;
}Notes
Applies to every details element on the front end.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.