Tag: Accordion code snippet

10 handy code snippets to supercharge your WordPress accordion

Customising your WordPress accordion doesn’t have to be daunting. With the right snippets of HTML, CSS, and JavaScript, you can transform your accordions into something truly special. Here are 10 reusable code snippets to make your accordions stand out, improve usability, and add interactive flair.

1. Basic accordion structure (HTML)

A clean and simple HTML structure to get you started.

Section 1

Content for Section 1

Section 2

Content for Section 2

2. Accordion styling (CSS)

Make your accordion visually appealing with this CSS.


.accordion {
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.accordion-item {
margin-bottom: 5px;
}
.accordion-header {
background-color: #f5f5f5;
border: none;
padding: 10px 15px;
width: 100%;
text-align: left;
font-size: 16px;
cursor: pointer;
outline: none;
}
.accordion-content {
display: none;
padding: 15px;
background-color: #fff;
border-top: 1px solid #ddd;
}


3. Open/close toggle with JavaScript

Add interactive functionality to toggle accordion sections.


const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
header.addEventListener('click', () => {
const content = header.nextElementSibling;
content.style.display = content.style.display === 'block' ? 'none' : 'block';
});
});


4. Smooth open/close animation (CSS)

Enhance your accordion with a smooth transition effect.


.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.accordion-content.open {
max-height: 500px; /* Adjust based on content size */
}


5. Adding icons to headers (HTML & CSS)

Use icons to indicate open/close states.

Section 1 +


.accordion-header .icon {
float: right;
transition: transform 0.3s;
}
.accordion-header.active .icon {
transform: rotate(45deg);
}


6. Keyboard navigation (JavaScript)

Make your accordion accessible by supporting keyboard controls.


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


7. Auto-close other sections (JavaScript)

Ensure only one section remains open at a time.


accordionHeaders.forEach(header => {
header.addEventListener('click', () => {
accordionHeaders.forEach(h => {
if (h !== header) {
h.nextElementSibling.style.display = 'none';
}
});
const content = header.nextElementSibling;
content.style.display = content.style.display === 'block' ? 'none' : 'block';
});
});


8. Dark mode styling (CSS)

Offer a sleek dark theme for your accordion.


.accordion {
background-color: #333;
color: #fff;
border: 1px solid #444;
}
.accordion-header {
background-color: #444;
color: #fff;
}
.accordion-content {
background-color: #555;
color: #ddd;
}


9. Expand all/collapse all buttons (JavaScript)

Provide global controls for the entire accordion.


Expand All
Collapse All


const expandAll = document.getElementById('expand-all');
const collapseAll = document.getElementById('collapse-all');

expandAll.addEventListener('click', () => {
document.querySelectorAll('.accordion-content').forEach(content => {
content.style.display = 'block';
});
});

collapseAll.addEventListener('click', () => {
document.querySelectorAll('.accordion-content').forEach(content => {
content.style.display = 'none';
});
});


10. Dynamic content loading (JavaScript)

Load accordion content dynamically for better performance.


accordionHeaders.forEach(header => {
header.addEventListener('click', () => {
const content = header.nextElementSibling;
if (!content.innerHTML.trim()) {
content.innerHTML = 'Loading...';
setTimeout(() => {
content.innerHTML = 'Dynamic content loaded!';
}, 1000);
}
});
});


Final thoughts

These code snippets are designed to be practical, reusable, and easy to integrate into your WordPress accordion setup. Whether you’re looking to improve accessibility, enhance interactivity, or create a unique visual style, these snippets give you the tools to supercharge your accordions and improve your website’s user experience.

Accordion code snippet for WordPress

What is an accordion code snippet?

An accordion code snippet is a pre-written piece of code that you can use to add interactive accordion functionality to your WordPress site. These snippets help organise content into expandable sections. Learn more about creating accordion sections with block templates.

Why use an accordion code snippet?

Accordion code snippets simplify the process of creating dynamic and responsive content. They are especially useful for FAQs, toggles, and organised layouts. Find out how accordion snippets improve website design.

How can I use an accordion code snippet in WordPress?

You can add an accordion code snippet to your site using custom HTML blocks, page builders, or directly into your theme’s code. MaxiBlocks makes this process easier with pre-designed layouts. Learn why MaxiBlocks is the best choice for accordions.

Accordion code snippet example

Here’s a simple example of an accordion using HTML and CSS:

“`html

.accordion-content {
display: none;
padding: 10px;
border: 1px solid #ddd;
}
.accordion-button {
background: #f4f4f4;
border: none;
width: 100%;
text-align: left;
padding: 10px;
cursor: pointer;
}
.accordion-button.active + .accordion-content {
display: block;
}

function toggleAccordion(button) {
button.classList.toggle(“active”);
const content = button.nextElementSibling;
content.style.display = content.style.display === “block” ? “none” : “block”;
}

How does this code work?

The code creates a simple accordion using HTML for structure, CSS for styling, and JavaScript for interactivity. The “ toggles the visibility of the corresponding content.

How can I enhance accordion snippets?

For more advanced features, use icons, animations, or integrate with MaxiBlocks templates to create professional accordion designs. Explore icons for enhancing accordion snippets.

What makes MaxiBlocks ideal for accordion code snippets?

MaxiBlocks provides pre-designed accordion patterns and drag-and-drop tools, so you can avoid manual coding. Learn about accordion templates in MaxiBlocks.