How to Create a Dynamic Horizontal Posts Accordion - Using MB Views

If you're looking for a way to present your blog in a fresh and dynamic way, then this guide is for you. We'll explore how to create a horizontal accordion of featured images with the help of MB Views from Meta Box.

This is a page I created as an example of this tutorial:

Video Version

Benefits of the Accordion Style

Typically, blog posts are presented in a traditional format: headlines, paragraphs, and images arranged one after another from top to bottom. This structure is clear and easy to read, but it can sometimes feel dull. You have to scroll to view all the content.

When you want to make it innovative and exciting, using an accordion can be a great option. It is a user interface element that allows content to be expanded or collapsed, helping organize information in a compact and interactive way. So, displaying posts as an accordion brings some benefits for your WordPress site:

• Save screen space
• Make your content more eye-catching
• Offer a better user experience: readers can quickly browse through multiple posts without scrolling too much.

There are lots of different accordion styles out there, but we’re going to focus on a horizontal one, using featured images of posts as the interactive tabs.

Before Getting Started

As you can see on the demo I have at first, the thumbnail and short title are present for each post. They are arranged side by side. When you click on the title, the corresponding post content will be displayed. It may sound tricky or complicated at first, but you'll see that it's absolutely doable, especially with the help of MB Views.

So, in this practice, we recommend you install Meta Box AIO to have a framework and features of MB Views to create a template for displaying posts in a horizontal accordion.

You can also use other extensions inside Meta Box AIO for additional advanced features.

Create a New Page

I already have some posts here for demonstration purposes.

I’ll display these posts as an accordion on a page. So, let’s create it first.

Go to Pages, and create a new one.

Create a Template for Horizontal Accordion

We’ll display and make the accordion interactive using MB Views.

Go to Meta Box > Views, and create a template for it.

With MB Views, you can insert fields through the Insert Field button or add code directly. I combine both of them.

Get Data of Posts

First, add these lines of code:

{% set args = { post_type: 'post', posts_per_page: -1} %}
{% set posts = mb.get_posts( args ) %}
{% for post in posts %}

{% endfor %}

In there:

• {% set args = { post_type: 'post', posts_per_page: -1} %}: is to declare that we’ll get posts on the site through the post slug. If you want to get posts from a custom post type, just change that slug.
• mb.get_posts: is a Meta Box function to get the post.
• {% for post in posts %}...{% endfor %}: is a loop to display all of posts since there are various posts.

Inside the loop, we’ll get data for each post. We recommend you use the button I mentioned before, then you can insert any field you want from the right panel. In this case, we need the featured images, post title, and the post ID for linking between the post content and its title. All of them are in the Post tab. Just insert them one by one.

When you insert a field, the code will be generated in the Template tab.

You can also set the size for the post thumbnail. After inserting three fields, our template will be like this:

Next, move to the Settings tab to apply the template to the page we created at first. Set the Type as Singular, and choose your page. You should put the accordion at the top of the post content.

On the frontend, the page is displayed with all the data we get.

Transform Data to Horizontal Accordion

In this step, we’ll style the data and add action to have the horizontal accordion.

Style the Data

Back to the created template to add some code.

First, add a line of code to declare and load the jQuery library we’ll use for having a horizontal accordion.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

For the data we get, you should modify it for styling by adding some div tags and classes. Then, the code will be like this:

As you can see, I use mb.get_permalink() function to retrieve the URL of the post via its ID.

And, mb.substr(post.title, 0, 15) cuts the post title to the first 15 characters, including space. It's used to display a shortened version of the title. You can change this number as you want.

Next, move to the CSS tab to add some code to make the data of the accordion more beautiful.

Add Action for the Interactive Thumbnail

Go ahead to the JavaScript tab to add an action for the accordion. I’ll add some code:

$(function () {
var width_accordian = $('.accordian ul').css("width");
$('.accordian .image_title').css("width", width_accordian);

var lis_count = $('.accordian .mb-item').length;
function set_width_time() {
var width = 100 / lis_count;
$('.accordian .mb-item').css("width", width + '%');
}
set_width_time();

$(".accordian ul li.mb-item").hover(function () {
var width1 = 40 / (lis_count - 1);
$('.accordian .mb-item').css("width", width1 + '%');
$(this).css("width", '60%');
}, function () {
set_width_time();
});
});

Specifically:

• var width_accordian = $('.accordian ul').css("width"): is to get the width of the element inside the accordion.
• $('.accordian .image_title').css("width", width_accordian): set the accordion width to all the images we have.
• var lis_count = $('.accordian .mb-item').length: helps count the total posts.
• var width = 100 / lis_count: is to equally divide the width among all items.

When the reader hovers over a thumbnail, the below code runs:

$(".accordian ul li.mb-item").hover(function () {
var width1 = 40 / (lis_count - 1);
$('.accordian .mb-item').css("width", width1 + '%');
$(this).css("width", '60%');
}, function () {
set_width_time();

Specifically, the width of the image hovered over will increase to 60%, and the others will equally share the remaining 40%.

That’s done. I’ve uploaded the code I use in this tutorial to GitHub, so you can refer to it.

Now, go to the page on the frontend. You’ll see that the accordion looks good, with a thumbnail and a short title. The width of each featured image changes when you interact with it. Also, the full content of the corresponding post will be shown when you click on the title.

Last Words

With just a bit of code and the power of MB Views, you’ve created a dynamic, horizontal accordion that’s not only functional but also visually engaging. This approach keeps your layout clean while giving visitors quick access to post content in an interactive way.

Feel free to tweak the styles or logic to better fit your site’s design. We also have a helpful tutorial on dynamic styling with data attributes, a great way to make your pages even more visually appealing. And as always, if you build something cool with Meta Box, we’d love to see it. Happy building!

• MB Views: How To Display Relationships?
• How to Create Reusable Template Parts in WordPress
• How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
• How to Randomize Hero Image in WordPress - Using MB Views
• How to Display a Video Playlist - Using MB Views
• How to Create a Reading Progress Bar in WordPress Posts - P1 - Using MB Views
• How to Create Reading Time to Your WordPress Posts - Using MB Views
• How to Add Code to Header and Footer in WordPress - Using MB Views
• How to Create Charts in Posts - Using MB Views
• How to Create a Dynamic Horizontal Posts Accordion - Using MB Views