Add Accordion to the templates

Do I need to add any other js library to my assets folder, or edit any template file? Do you have an example of these accordions (from a visual and functional point of view)?

Yes, it is possible. Here is the modified code that closes the currently open accordion automatically once a new one is clicked: 

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
 acc[i].addEventListener("click", function() {
   let activeAccordions = document.querySelectorAll(".accordion-div .accordion.active");
   for (let j = 0; j < activeAccordions.length; j++) {
     activeAccordions[j].classList.remove("active");
     activeAccordions[j].nextElementSibling.style.maxHeight = null;
   }

   var panel = this.nextElementSibling;
   if (!this.classList.contains("active")) {
     this.classList.add("active");
     panel.style.maxHeight = panel.scrollHeight + "px";
   } else {
     this.classList.remove("active");
     panel.style.maxHeight = null;
   }
 });
}

So when the accordion is clicked, I try first to find all currently active accordions, remove the active class, and reset the maxHeight of the panel.  Then check the current panel to see if it is active and if not, the active class is added, and changing the maxHeight to scrollHeight. 
 

I also created a sandbox to demo the component:

https://codesandbox.io/p/sandbox/friendly-julien-tvc882

Dear community members,

We know many of you have been waiting for components like tabs and accordions in the editor. While these aren't available as WYSIWYG elements yet in the , we've put together a workaround that should help streamline your work in the meantime. Below you'll find step-by-step instructions along with video demonstrations (please note that the New Editor is being used.)

Important note: If you have access to modify your theme, it's better to add the styles and code there. If not, follow the instructions below using content blocks.
 

Instructions for tabs:

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

2. Create an HTML block and insert this code snippet: 

   <script>
      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();
     			});
   
     		});
     	}
     });
   </script>
   <style>
   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;
     }
   </style>

3. Create a new article
4. Apply the content block you just created

5. Open the HTML editor. You'll see the applied content block

   </section>
   <p>&nbsp;</p>
   <section class="tabs" style="border: thin solid #97bfbf; padding: 2em;">
     <h2 id="h_01K04GD9NNYSZ6D218VJKR04MH">Panel 1</h2>
     <p>
       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.
     </p>
     <h2 id="h_01K04GD9NNPPZ5E097DYKFBZXF">Panel 2</h2>
     <p>
       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.
     </p>
     <h2 id="h_01K04GD9NNW7FQA22XBFTX2HP0">Panel 3</h2>
     <p>
       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.
     </p>
   </section>

    

6. You can now add, remove, or modify tabs, change text, rename tabs, etc. (see video for details)

Instructions for accordions:

The process is the same as tabs, just with different code snippets:

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

2. Create an HTML block and insert this code snippet:

    <script>
     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 <p> 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();
     				}
     			});
     		});
     	}
     });
   </script>
   <style>
   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;}
     }
   </style>

3. Create a new article
4. Apply the content block you just created

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

   <section class="accordion" style="border: thin solid #97bfbf; padding: 2em;">
     <h2 id="h_01JZWRRY8P9TTBM1K3FGFXE8Y5">Panel 1</h2>
     <p>
       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.
     </p>
     <h2 id="h_01JZWRS1GWECTKGQ6ZJCMDGF9A">Panel 2</h2>
     <p>
       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.
     </p>
     <h2 id="h_01JZWRS4FZEFNK861CS5TR412N">Panel 3</h2>
     <p>
       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.
     </p>
     <p>&nbsp;</p>
     <h2 id="h_01KAE4P9AGGR45JFVX2NGE4P7J">Panel 4</h2>
     <p>
       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.
     </p>
   </section>

6. You can now add, remove, or modify accordions, change text, etc. (see video for details)

We hope this helps make your workflow a bit easier until these features become natively available