Can I use accordions and tabs for my help center articles?

Question

Can I use accordions and tabs for my help center articles? I want to use accordions and tabs in my help center articles to make the content easier to read.

Answer

Tabs and accordions are not available as What You See Is What You Get elements yet, but you can use a workaround to create them.

If you can modify your theme, add the styles and code there. If not, follow the steps below with content blocks.

Create a tab

Create a content block and name it something like Tabs - script + style

Create an HTML block and insert this code snippet:


document.addEventListener('DOMContentLoaded', () => {
const tabComponents = document.querySelectorAll('section.tabs');
console.log(tabComponents)

for (const container of tabComponents) {
container.style = ''

const headers = Array.from(container.querySelectorAll('h2'));
const panels = headers.map(h => h.nextElementSibling);

panels.forEach(panel => {
container.appendChild(panel)
})

// Setup accessibility and initial states
headers.forEach((header, i) => {
header.setAttribute('role', 'tab');
header.setAttribute('aria-selected', 'false');
header.setAttribute('tabindex', '-1');
header.id = header.id || `tab-${i}`;
panels[i].setAttribute('role', 'tabpanel');
panels[i].setAttribute('aria-labelledby', header.id);
panels[i].hidden = true;
});

const firstPanel = panels[0]
headers.forEach(header => {
container.insertBefore(header, firstPanel)
})

// Activate first tab by default
function activateTab(index) {
headers.forEach((header, i) => {
const selected = i === index;
header.setAttribute('aria-selected', selected);
header.tabIndex = selected ? 0 : -1;
panels[i].hidden = !selected;
if (selected) {
panels[i].classList.add('active');
headers[i].focus();
} else {
panels[i].classList.remove('active');
}
});
}
activateTab(0);

// Click to activate tab
headers.forEach((header, i) => {
header.addEventListener('click', () => {
activateTab(i);
});
// Keyboard nav
header.addEventListener('keydown', e => {
let newIndex;
switch(e.key) {
case 'ArrowRight':
case 'ArrowDown':
newIndex = (i + 1) % headers.length;
headers[newIndex].focus();
break;
case 'ArrowLeft':
case 'ArrowUp':
newIndex = (i - 1 + headers.length) % headers.length;
headers[newIndex].focus();
break;
case 'Home':
headers[0].focus();
break;
case 'End':
headers[headers.length - 1].focus();
break;
case 'Enter':
case ' ':
activateTab(i);
break;
default:
return; // Do nothing for other keys
}
e.preventDefault();
});

});
}
});


section.accordion h2 {
cursor: pointer;
background: #f0f0f0;
padding: 0.75em 1em;
margin: 0;
border-bottom: 1px solid #ccc;
}
section.accordion h2[aria-expanded="true"] {
background: #e2e2e2;
}
section.accordion p {
margin: 0;
padding: 1em;
border-bottom: 1px solid #ccc;
display: none;
animation: fadeIn 0.3s ease forwards;
}
section.accordion p.expanded {
display: block;
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

section.tabs {
font-family: Arial, sans-serif;
}
section.tabs h2 {
display: inline-block;
margin: 0;
padding: 0.5em 1em;
cursor: pointer;
background: #ddd;
border: 1px solid #bbb;
border-bottom: none;
user-select: none;
}
section.tabs h2[aria-selected="true"] {
background: white;
border-bottom: 1px solid white;
font-weight: bold;
}
section.tabs p {
border: 1px solid #bbb;
padding: 1em;
margin-top: 0;
display: none;
}
section.tabs p.active {
display: block;
}


Create a new article

Apply the content block you just created

Open the HTML editor. You will see the applied content block.



Panel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac lobortis
ex. Aliquam pharetra diam neque, ac imperdiet eros hendrerit sollicitudin.
Aliquam et tempus tortor. Etiam viverra velit sed ante vulputate maximus.
Pellentesque tempor turpis libero, condimentum tincidunt nibh bibendum ut.
Sed maximus elit sapien, sed rhoncus augue vulputate ut. Mauris quis maximus
nisl, at scelerisque mi. Phasellus sit amet eleifend dolor, a aliquam nisi.
Sed euismod nibh a aliquet hendrerit. Ut tristique, lectus vel placerat eleifend,
velit nunc pretium diam, in molestie dui neque at augue.

Panel 2

Fusce vitae lectus sapien. Phasellus vitae urna sit amet risus consequat
facilisis. Pellentesque consectetur vitae enim ut aliquam. Curabitur id mattis
est. Etiam auctor convallis maximus. Nullam et suscipit dui. Vestibulum at
arcu leo. Vestibulum vehicula viverra odio, ac tristique urna facilisis non.

Panel 3

Sed elit mi, scelerisque sit amet viverra in, pellentesque sit amet turpis.
Quisque sagittis diam orci, id placerat dui semper ut. Curabitur hendrerit
nisl id erat lacinia sagittis. Ut sagittis tempor ex ut tempor. Morbi ut
magna dui. Suspendisse potenti. Vestibulum finibus at diam id ullamcorper.
Suspendisse mollis consectetur enim quis elementum. Duis ac odio vitae diam
commodo gravida quis in nibh. Suspendisse et dictum tellus, vel scelerisque
leo. Proin venenatis finibus pulvinar. Nulla id fermentum lorem. Praesent
nec magna ac mi pellentesque sollicitudin et vitae mauris. Sed rutrum feugiat
lorem pretium auctor.



Add, remove, or rename tabs and edit text. See the video for details.

This is what tabs look like:

Create an accordion

Create a content block and name it something like Accordions - script + style

Create an HTML block and insert this code snippet:


document.addEventListener('DOMContentLoaded', () => {
const accordions = document.querySelectorAll('section.accordion');
for (const accordion of accordions) {
accordion.style = ''

const headers = accordion.querySelectorAll('h2');

headers.forEach((header, i) => {
// Make each heading a button for accessibility and toggle
header.setAttribute('tabindex', '0');
header.setAttribute('role', 'button');
header.setAttribute('aria-expanded', 'false');
// The panel is the immediately after the header
const panel = header.nextElementSibling;
panel.setAttribute('role', 'region');
panel.setAttribute('aria-labelledby', header.id);
panel.classList.remove('expanded');

header.addEventListener('click', () => {
const expanded = header.getAttribute('aria-expanded') === 'true';
// Close all panels first for accordion behavior
headers.forEach(h => {
h.setAttribute('aria-expanded', 'false');
h.nextElementSibling.classList.remove('expanded');
});
if (!expanded) {
header.setAttribute('aria-expanded', 'true');
panel.classList.add('expanded');
}
});

header.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
header.click();
}
});
});
}
});


section.accordion h2 {
cursor: pointer;
background: #f0f0f0;
padding: 0.75em 1em;
margin: 0;
border-bottom: 1px solid #ccc;
}
section.accordion h2[aria-expanded="true"] {
background: #e2e2e2;
}
section.accordion p {
margin: 0;
padding: 1em;
border-bottom: 1px solid #ccc;
display: none;
animation: fadeIn 0.3s ease forwards;
}
section.accordion p.expanded {
display: block;
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}


Create a new article

Apply the content block you just created

Open the HTML editor. You will see the applied content block there. On a new line, insert this code snippet:


Panel 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac lobortis
ex. Aliquam pharetra diam neque, ac imperdiet eros hendrerit sollicitudin.
Aliquam et tempus tortor. Etiam viverra velit sed ante vulputate maximus.
Pellentesque tempor turpis libero, condimentum tincidunt nibh bibendum ut.
Sed maximus elit sapien, sed rhoncus augue vulputate ut. Mauris quis maximus
nisl, at scelerisque mi. Phasellus sit amet eleifend dolor, a aliquam nisi.
Sed euismod nibh a aliquet hendrerit. Ut tristique, lectus vel placerat eleifend,
velit nunc pretium diam, in molestie dui neque at augue.

Panel 2

Fusce vitae lectus sapien. Phasellus vitae urna sit amet risus consequat
facilisis. Pellentesque consectetur vitae enim ut aliquam. Curabitur id mattis
est. Etiam auctor convallis maximus. Nullam et suscipit dui. Vestibulum at
arcu leo. Vestibulum vehicula viverra odio, ac tristique urna facilisis non.

Panel 3

Sed elit mi, scelerisque sit amet viverra in, pellentesque sit amet turpis.
Quisque sagittis diam orci, id placerat dui semper ut. Curabitur hendrerit
nisl id erat lacinia sagittis. Ut sagittis tempor ex ut tempor. Morbi ut
magna dui. Suspendisse potenti. Vestibulum finibus at diam id ullamcorper.
Suspendisse mollis consectetur enim quis elementum. Duis ac odio vitae diam
commodo gravida quis in nibh. Suspendisse et dictum tellus, vel scelerisque
leo. Proin venenatis finibus pulvinar. Nulla id fermentum lorem. Praesent
nec magna ac mi pellentesque sollicitudin et vitae mauris. Sed rutrum feugiat
lorem pretium auctor.

&
Panel 4

Sed elit mi, scelerisque sit amet viverra in, pellentesque sit amet turpis.
Quisque sagittis diam orci, id placerat dui semper ut. Curabitur hendrerit
nisl id erat lacinia sagittis. Ut sagittis tempor ex ut tempor. Morbi ut
magna dui. Suspendisse potenti. Vestibulum finibus at diam id ullamcorper.
Suspendisse mollis consectetur enim quis elementum. Duis ac odio vitae diam
commodo gravida quis in nibh. Suspendisse et dictum tellus, vel scelerisque
leo. Proin venenatis finibus pulvinar. Nulla id fermentum lorem. Praesent
nec magna ac mi pellentesque sollicitudin et vitae mauris. Sed rutrum feugiat
lorem pretium auctor.



Add, remove, or rename accordion sections and edit text. See the video for details.

This is what accordions look like:

Note: This workaround works with the Copenhagen theme. A custom theme may cause conflicts. Turn on unsafe content in settings.