15 December 2011

Create a Simple Accordion Content Slider

One of the greatest challenges facing web site owners is how to structure your content to keep thing uncluttered and enjoyable to read. One method of managing content clutter is to implement an accordion content slider.

In this article, we are going to provide you with some very basic steps you can take to insert a simple accordion slider into a post on your website.

To get started, let’s first understand what the end result will look like.

Simple Accordion Content Slider Demo

Accordion Item 1 – {Click Me}

Content (image and text)

This is the content section of Accordion Item 1.

It includes an image, but you could also add other items like a video or a Google map.

You could add any type of content in this section.

Accordion Item 2 – {Click me too}

This is content with no border.Again, not very exciting, but we could put any type of web page content in here that we wanted. Even a photo gallery if we wanted.

Accordion Item 3 – {Click me also}

Here is some standard Lorem Ipsum text. Proin non nibh non felis rhoncus facilisis. Sed porta aliquet odio ut fermentum. Nullam non ante sem. Nulla facilisi. Donec porttitor tempor diam ac dapibus. Nullam eu fringilla ipsum. Integer suscipit euismod sem id vulputate. Aenean volutpat mattis dolor. Nunc elit nulla, fringilla id aliquam eget, bibendum vel ante. Vestibulum dignissim vehicula ante vitae venenatis. Praesent sit amet justo nisi. Donec vehicula dictum enim, id tincidunt mauris blandit eget. Maecenas lacinia tincidunt lacus nec varius. Aenean nulla sapien, lobortis id tincidunt sit amet, consequat sit amet diam.

We have used some very basic styling. We have also ensured that the content for the first Accordion Content Slider box is visible by default.

The content for the other two Accordion boxes are closed. But we want their associated content section to open when we click the heading.

Now, let’s get started on creating our own.

Since we are assuming you are using WordPress, we just want to confirm that the jQuery libraries are loading properly.

You can do this by loading up your home page and from your browser menu select View > Source. You can then press CTRL-F and search for “jquery”. By default, WordPress does load this library so we will assume it is loaded and move on. If things do not work later, we can load jQuery by adding the following line to your header.php file found in your theme folder.

1	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Version 3.3.1 is the latest version. You can do a search in Google to determine the latest version.

Step One – Create the Template

Now let’s create the template for our accordion. We will keep it to three sections for now:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div id="accordion">
<div class="acc_content">
<p class="acc_head">First Heading text</p>

<div class="acc_body"></div>
</div>
<div class="acc_content">
<p class="acc_head">Second Heading text</p>

<div class="acc_body"></div>
</div>
<div class="acc_content">
<p class="acc_head">Third Heading text</p>

<div class="acc_body"></div>
</div>
</div>

Each accordion content slider tab is wrapped in a DIV with a class of “acc_content”.

Inside the “acc_content” section is a heading. The heading is identified with the class of “acc_head”. There is also a the accordion content body which has a class of “acc_body”. This holds the content specific to each accordion item, or “acc_content” section.

The entire accordion content slider is wrapped in an ID tag of “accordion”. Remember, id tags are specific and should not occur more than once on any page. So if you have multiple accordion content sliders on a page, you should change the value of the ID tag so all accordions are unique.

If you need to add more accordion content slider items, simply add another “acc_content” section.

Step Two – Add some CSS pre-styling

Before we add our content, we will add some styling. This is a bit backwards by some standards but I like to see my product taking shape to my style settings early on.

In your style sheet add the code below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/* Clear our floats and set margins to '0' */
#accordion { clear:both; margin:0; }

/* Styles each box of content for the accordion */
.acc_content {
margin:0 0 5px 0; /* Separate each accordion tab by 5px on the bottom */
clear:both;
}

/* Styles the header and associated body areas */
.acc_head {
font-weight:bold;
cursor:pointer; /* Make sure the Heading looks like a clickable item to your visitors */
border:2px solid #bbb;
background-color:#ddd;
padding:12px 24px;
}
.acc_body {
overflow:auto; /* makes sure the body grows with the content */
padding:12px 24px;
border:2px solid #bbb;
border-top:none;
}

Step Three – Add content

Now you can add some content to your content areas (“acc_body” sections). Feel free to use the content from the demo above if you want.

You can also update the heading text to better describe each section.

Notice that we have added in some padding to the head and body sections of each accordion item section. This helps keep the content readable and adds a bit of white-space between the text and the borders of the accordion content slider.

Step Four – Add the Cool Stuff

Now we can add some JavaScript to make the accordion content slider work as intended.

First, we want to hide all of the content for each accordion item section using jQuery(".acc_body").hide();.
Then, we need to listen for someone clicking on the header.
When they do click, we want to get the content for that accordion section and slide it in to make it visible to the visitor.

//toggle the class acc_body when 'acc_head' is clicked
jQuery(".acc_head").click(function() {
jQuery(this).next(".acc_body").slideToggle(600);
});

The last thing we want to do is to make sure that first accordion body section is visible by default.

This require two edits. One is to the template we created. Edit the HTML of the first <div class="acc_body"></div> occurrence to look like the following:

The edit the JavaScript just after the jQuery(".acc_body").hide();. Add in the following line of code:

jQuery(".acc_body.show").show();

We also need to change the line of code that displays the body content from jQuery(this).next(".acc_body").slideToggle(600); to the following:

jQuery(this).next(".acc_body").slideToggle(600).addClass("show");

Your final JavaScript file should look like this:

1
2
3
4
5
6
7
8
9
10
11
12

Step Five – Tell WordPress to Load the JavaScript

So we have a bit of JavaScript. Where does it go? How do we tell WordPress to load the JavaScript?

We should add this into the functions.php file of our WordPress theme. So go into your theme editor (Dashboard > Appearance > Theme Editor) and select the functions.php file.

Add the following code to the end of your functions.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function wpb_hook_javascript() {
if (is_single ('1580')) {
?>
<script type="text/javascript">
jQuery(document).ready(function() {
//hide the all of the accordion body elements 'acc_body' associated with each accordion section
jQuery(".acc_body").hide();
jQuery(".acc_body.show").show();

//toggle the class acc_body when 'acc_head' is clicked
jQuery(".acc_head").click(function() {
jQuery(this).next(".acc_body").slideToggle(600).addClass("show");
});
});
</script>
 }
}
add_action('wp_head', 'wpb_hook_javascript');

Notice line number 2?

The number ‘1580’ refers to the Post ID assigned by WordPress. If you edit the post where you want the JavaScript loaded, you can see the post ID in the URL. It will look like this “wp-admin/post.php?post=1580&action=edit”. You want those number next to “post=”. Update line 2 of your functions.php code with the number of your post ID.

Now save your file and let’s test it to make sure everything is working.

Does Your Simple Accordion Content Slider Work?

I hope so. If not, please leave us a comment and tell us what your results were.

An Accordion Content Slider is a great way to add content to a web page. The content does not need to be immediately visible to your visitors. However, the content is still indexed by search engines.

If a visitor doesn’t have JavaScript enabled on their browser, they still get to see all of your valuable content. So this is backward compatible.

We hope you enjoyed this article. Please leave us your feedback below.

Thank you for reading.

Siam Communications