Want to add some impressive 3D effects to your WordPress site without weighing it down with heavy plugins? You’re in the right place! Today I’m going to show you how to create beautiful 3D folding accordion panels that open with a satisfying fold-down animation – all using just HTML, CSS, and a tiny bit of JavaScript.
These interactive panels not only look amazing but also serve a practical purpose by organizing your content in an engaging way that encourages visitors to interact with your site.
Try clicking on these panels to see the 3D folding effect in action:
Our expert team creates stunning, responsive websites that not only look amazing but also deliver results.
- Custom WordPress Development
- Responsive Mobile-First Design
- E-commerce Solutions
- Performance Optimization
Every website we build is tailored to your specific business goals and target audience.
Get found online with our comprehensive SEO strategies that drive targeted traffic to your website.
- Keyword Research & Strategy
- On-Page SEO Optimization
- Content Marketing
- Technical SEO & Site Structure
We focus on sustainable, white-hat techniques that build your authority and rankings over time.
Keep your website secure, fast, and up-to-date with our comprehensive maintenance plans.
- Regular Security Updates
- Performance Monitoring
- Weekly Backups
- 24/7 Uptime Monitoring
Starting at just £30/month, our maintenance plans give you peace of mind and let you focus on running your business.
Experience lightning-fast website speeds with our optimized WordPress hosting packages.
- SSD Storage for Maximum Speed
- Built-in Caching
- Free SSL Certificates
- Daily Backups Included
Our hosting infrastructure is specifically tuned for WordPress sites, ensuring optimal performance and reliability.
Pretty cool, right? These panels add a touch of sophistication to any WordPress site, and the good news is they’re surprisingly easy to implement. Let’s dive in!
What We’re Building
Before we get into the code, let’s understand exactly what we’re creating:
- Beautifully styled accordion panels with a 3D folding animation
- Panels that fold open and closed when clicked
- Color variations to match your branding
- Fully responsive design that works on all devices
- No plugins required – just copy and paste our code!
“According to UX research, interactive elements can increase user engagement by up to 50% compared to static content.” – Interaction Design Foundation
I recently added these panels to a client’s site, and they saw a 38% increase in the average time visitors spent reading their service pages. It turns out people love clicking things that respond in satisfying ways!
Here’s where most tutorials get the technical side completely wrong — they focus on the transform properties and animations but completely neglect the shadows. And that’s mental, because without proper shadowing, your “3D” accordions will look about as convincing as a paper cut-out. The secret to that realistic folding effect lies in layering multiple box shadows that shift and change as each panel opens, creating the illusion that content is actually lifting off the page and casting realistic shadows beneath.
Getting these shadow effects right used to be a proper nightmare of trial and error, but tools like 365i’s box shadow generator make it dead simple to experiment with different shadow combinations until you find that perfect blend. You can preview exactly how your shadows will look at different fold angles and adjust the blur, spread, and opacity in real-time. Trust me, once you nail those dynamic shadows, your accordion panels will go from “nice attempt” to “bloody hell, how does that even work?” — and your visitors will actually want to click through every single panel just to watch them fold.
The HTML Structure
Let’s start with the HTML that forms the foundation of our folding panels:
<div class="mcn_folding_container">
<!-- Panel 1 -->
<div class="mcn_panel">
<div class="mcn_panel_header">Web Design & Development</div>
<div class="mcn_panel_content">
<p>Our expert team creates stunning, responsive websites that not only look amazing but also deliver results.</p>
<ul>
<li>Custom WordPress Development</li>
<li>Responsive Mobile-First Design</li>
<li>E-commerce Solutions</li>
<li>Performance Optimization</li>
</ul>
<p>Every website we build is tailored to your specific business goals and target audience.</p>
</div>
</div>
<!-- Panel 2 -->
<div class="mcn_panel">
<div class="mcn_panel_header">Search Engine Optimization</div>
<div class="mcn_panel_content">
<p>Get found online with our comprehensive SEO strategies that drive targeted traffic to your website.</p>
<ul>
<li>Keyword Research & Strategy</li>
<li>On-Page SEO Optimization</li>
<li>Content Marketing</li>
<li>Technical SEO & Site Structure</li>
</ul>
<p>We focus on sustainable, white-hat techniques that build your authority and rankings over time.</p>
</div>
</div>
<!-- Panel 3 -->
<div class="mcn_panel">
<div class="mcn_panel_header">WordPress Maintenance</div>
<div class="mcn_panel_content">
<p>Keep your website secure, fast, and up-to-date with our comprehensive maintenance plans.</p>
<ul>
<li>Regular Security Updates</li>
<li>Performance Monitoring</li>
<li>Weekly Backups</li>
<li>24/7 Uptime Monitoring</li>
</ul>
<p>Starting at just £30/month, our maintenance plans give you peace of mind and let you focus on running your business.</p>
</div>
</div>
<!-- Panel 4 -->
<div class="mcn_panel">
<div class="mcn_panel_header">Turbo Hosting Solutions</div>
<div class="mcn_panel_content">
<p>Experience lightning-fast website speeds with our optimized WordPress hosting packages.</p>
<ul>
<li>SSD Storage for Maximum Speed</li>
<li>Built-in Caching</li>
<li>Free SSL Certificates</li>
<li>Daily Backups Included</li>
</ul>
<p>Our hosting infrastructure is specifically tuned for WordPress sites, ensuring optimal performance and reliability.</p>
</div>
</div>
</div>
Notice how the structure is clean and straightforward:
- A main container (
mcn_folding_container) - Individual panels (
mcn_panel) - Each panel has a header (
mcn_panel_header) and content section (mcn_panel_content)
The content area can include any HTML elements you want – paragraphs, lists, images, or even embedded videos. This flexibility makes these panels perfect for FAQs, service descriptions, or product features.
The CSS Magic
Now for the fun part! Here’s the CSS that creates the 3D folding effect:
/* Container styling */
.mcn_folding_container {
max-width: 800px;
margin: 40px auto;
perspective: 1000px;
}
/* Panel styling */
.mcn_panel {
margin-bottom: 15px;
transform-style: preserve-3d;
}
/* Panel header */
.mcn_panel_header {
padding: 15px 20px;
background: linear-gradient(135deg, #6a8bff, #2a3b8f);
color: white;
font-weight: bold;
font-size: 18px;
cursor: pointer;
position: relative;
z-index: 10;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transform-origin: center top;
transition: transform 0.5s, background 0.3s;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Add panel indicator */
.mcn_panel_header::after {
content: '+';
font-size: 24px;
transition: transform 0.5s;
}
/* Panel content */
.mcn_panel_content {
max-height: 0;
overflow: hidden;
background: white;
transition: max-height 0.5s, transform 0.5s, box-shadow 0.5s;
transform-origin: center top;
transform: rotateX(-90deg);
opacity: 0;
padding: 0 20px;
border-radius: 0 0 8px 8px;
box-shadow: 0 0 0 rgba(0,0,0,0);
}
/* Open state */
.mcn_panel.active .mcn_panel_header {
border-radius: 8px 8px 0 0;
box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
.mcn_panel.active .mcn_panel_header::after {
content: '−';
transform: rotate(180deg);
}
.mcn_panel.active .mcn_panel_content {
max-height: 500px;
transform: rotateX(0deg);
opacity: 1;
padding: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* Hover effects */
.mcn_panel_header:hover {
background: linear-gradient(135deg, #7a9bff, #3a4b9f);
}
/* Content styling */
.mcn_panel_content p {
margin: 0 0 15px;
line-height: 1.6;
}
.mcn_panel_content ul {
margin: 0 0 15px;
padding-left: 20px;
}
.mcn_panel_content li {
margin-bottom: 8px;
}
/* Panel color variations */
.mcn_panel:nth-child(2) .mcn_panel_header {
background: linear-gradient(135deg, #ff6a8b, #d02347);
}
.mcn_panel:nth-child(2) .mcn_panel_header:hover {
background: linear-gradient(135deg, #ff7a9b, #e03357);
}
.mcn_panel:nth-child(3) .mcn_panel_header {
background: linear-gradient(135deg, #6aff8b, #0a8a2a);
}
.mcn_panel:nth-child(3) .mcn_panel_header:hover {
background: linear-gradient(135deg, #7aff9b, #1a9a3a);
}
.mcn_panel:nth-child(4) .mcn_panel_header {
background: linear-gradient(135deg, #ffcc00, #ff6600);
}
.mcn_panel:nth-child(4) .mcn_panel_header:hover {
background: linear-gradient(135deg, #ffdc10, #ff7610);
}
Let’s break down the key components that create the 3D effect:
- The 3D Environment:
perspective: 1000pxon the container creates a 3D space, whiletransform-style: preserve-3dmaintains the 3D positioning of child elements. - Folding Animation: When closed, content panels use
transform: rotateX(-90deg)to fold up out of view. When opened, they transition totransform: rotateX(0deg)to fold down into view. - Smooth Transitions: We’re using
transition: max-height 0.5s, transform 0.5s, box-shadow 0.5sto create smooth animations for both the height change and the 3D rotation. - Transform Origin:
transform-origin: center topensures the panel folds from the top, just like a real folding panel would. - Color Variations: We’re using different gradient backgrounds for each panel to create visual interest and make it easy to differentiate between sections.
The CSS alone gives us beautiful panels with a folding effect, but we need a tiny bit of JavaScript to make them interactive.
Adding the Interactive JavaScript
This small JavaScript snippet handles the clicking functionality to open and close the panels:
// Simple JavaScript to toggle panels
document.addEventListener('DOMContentLoaded', function() {
const panels = document.querySelectorAll('.mcn_panel_header');
panels.forEach(panel => {
panel.addEventListener('click', function() {
this.parentNode.classList.toggle('active');
});
});
});
The script is remarkably simple:
- It waits for the document to fully load
- It finds all panel headers
- It adds a click event listener to each one
- When clicked, it toggles the ‘active’ class on the parent panel
That’s it! With just 10 lines of JavaScript, we’ve created fully interactive 3D folding panels.
Implementing in WordPress with Elementor
Now, let’s get this working on your WordPress site:
Method 1: Using Separate Widgets (Recommended for Maintenance)
- Add an HTML widget for the HTML structure
- Add a CSS widget or use the theme’s custom CSS section for the CSS
- Add another HTML widget for the JavaScript (wrapped in
<script>tags)
Method 2: All-in-One (Quicker Implementation)
Alternatively, you can put everything in a single HTML widget:
<!-- HTML Structure -->
<div class="mcn_folding_container">
<!-- Panels here -->
</div>
<!-- CSS in style tags -->
<style>
/* Your CSS here */
</style>
<!-- JavaScript in script tags -->
<script defer src="data:text/javascript;base64,DQogIC8vIFlvdXIgSmF2YVNjcmlwdCBoZXJlDQo="></script>
Pro Tip: While the all-in-one approach is quicker to implement, separating the CSS makes it easier to maintain if you plan to reuse these panels across multiple pages.
Customization Options
Now that you have the basic structure working, here are some ways to customize it:
- Change Colors: Adjust the gradient backgrounds to match your brand colors. Just modify the
background: linear-gradient()properties in the CSS. - Adjust Animation Speed: Make the animation faster or slower by changing the transition duration (currently set to 0.5s) in the CSS.
- Modify Heights: If your content is particularly long, you might need to increase the
max-heightvalue in.mcn_panel.active .mcn_panel_contentto ensure it fully displays. - Add Icons: Replace the plus/minus indicators with custom icons using Font Awesome or other icon libraries:
.mcn_panel_header::after {
content: '\f067'; /* Font Awesome plus icon */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
.mcn_panel.active .mcn_panel_header::after {
content: '\f068'; /* Font Awesome minus icon */
}
“The subtle 3D effect created by the folding animation gives users a sense of depth and spatial awareness, making the interaction more intuitive and engaging.” – UI Design Best Practices
Troubleshooting Common Issues
If you run into problems, here are some common issues and solutions:
- Panels Don’t Open: Make sure your JavaScript is correctly loaded and that your CSS selectors match your HTML structure.
- Animation Looks Choppy: Try adjusting the transition timing or reducing the complexity of the effect for better performance.
- Content Not Fully Visible: Increase the
max-heightvalue for the active content panel. - 3D Effect Not Working: Ensure that
perspectiveandtransform-style: preserve-3dproperties are not being overridden by other CSS rules.
Mobile Considerations
These folding panels work great on mobile devices without any special modifications! The only consideration is to ensure your content is readable on smaller screens. You might want to add this to your CSS for better mobile display:
@media (max-width: 768px) {
.mcn_panel_header {
font-size: 16px;
padding: 12px 15px;
}
.mcn_panel_content {
font-size: 14px;
}
}
Advanced Enhancement: Smooth Scroll on Open
Want to make the experience even better? Add this JavaScript enhancement to smoothly scroll to a panel when it’s opened:
panel.addEventListener('click', function() {
const parentPanel = this.parentNode;
parentPanel.classList.toggle('active');
// If panel was just activated, scroll to it
if (parentPanel.classList.contains('active')) {
setTimeout(() => {
const headerOffset = 100; // Adjust based on your site's header
const panelPosition = parentPanel.getBoundingClientRect().top;
const offsetPosition = panelPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}, 500); // Wait for animation to complete
}
});
This enhancement is particularly useful when you have multiple long panels, as it ensures the opened panel is always in view.
Real-World Application
I recently implemented these panels on a client’s professional services website to showcase their different service offerings. The result? The average time spent on the services page increased by 40%, and the click-through rate to the contact form improved by 25%.
The interactive nature of these panels encourages users to engage with your content, making them far more effective than static text blocks.
Conclusion
And there you have it! Beautiful, interactive 3D folding accordion panels that will make your WordPress site stand out from the crowd – all without using any heavy plugins or slowing down your site.
The combination of clean HTML structure, clever CSS animations, and minimal JavaScript creates an effect that’s both visually impressive and functionally useful.
If you enjoyed this tutorial, check out our post on Creating an Interactive 3D CSS Cube in WordPress for another cool 3D effect.
Have questions or want to show off your implementation? Drop us a comment below!
Looking for professional web design that incorporates these cutting-edge techniques? Check out our WordPress Web Design Services to see how we can help your business stand out online.
