Need help stylizing accordions

[Kvist]

Hi,

I'm new to building a knowledge base in ServiceNow and am currently creating a template for use in our articles.

I want to implement accordions, and have done so successfully. However, the styling I have inserted for them does not apply when I insert my code into an article. When viewing in other html editors, it works fine.

My code is as below:

CSS:

summary {
background-color: #777;
color: white;
cursor: pointer;
width: calc(100% - 30px); /* Adjusted width to accommodate the arrow */
border: none;
outline: none;
font-size: 2em;
font-weight: bold;
text-transform: uppercase;
position: relative;
display: block;
margin-bottom: 20px;
border-radius: 10px;
}

.summary-1 {
background-color: #59595c;
}

h2 {
text-transform: uppercase;
font-size: 1em;
font-weight: bold;
padding: 10px 10px;

}

HTML:

<details open>
<summary class="summary-1"><h2>Intro</h2></summary>
<p>Lorem ipsum</p>
</details>

I have attached screenshots of how it looks and how it *should* look.

I would appreciate any help.

[vishalvr]

Hello @Kvist , Were you able to get a solution for this ?

[Kvist]

Hi,

Yes, I found a solution. 🙂

[vishalvr]

Hello @Kvist , That's great Can you share it please ?

[Kvist]

CSS:

details {
padding: 10px 0px;

}

/* Style for the summary element within details */
summary {
background-color: #777;
color: white;
cursor: pointer;
width: calc(100% - 30px); /* Adjusted width to accommodate the arrow */
border: none;
outline: none;
font-size: 2em;
font-weight: bold;
text-transform: uppercase;
position: relative;
display: block;
margin-bottom: 20px;
border-radius: 10px;
margin-left: 10px;
font-size: 2em;
font-weight: bold;
padding: 30px 20px;
box-shadow: 3px 3px 4px black;
}

/* Arrow icon for the summary element */
summary::after {
content: '\25B6'; /* Unicode character for a right-pointing triangle */
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
transition: transform 0.3s;
}

/* Change arrow icon when details is open */
details[open] summary::after {
content: '\25BC'; /* Unicode character for a downward-pointing triangle */
}

HTML:

<details>
<summary style="background-color: #6c7156;">Summary 1</summary>
<h3>Header 1</h3>
<p>Paragraph</p>
</details>