Create a Simple Accordion Slider

One of the greatest challenges facing web site owners is information overload. This cannot always be avoided but can result in a very long web page or a cluttered web page, which can ruin the experience for your visitors.

So we are going to introduce you to the simple accordion slider. Because you know all of the information on your web page is relevant. It just needs to be presented in a fashion that is much more user friendly and appealing to the visitor.

There is a real world example of how we used an accordion tab slider at Bangkok Condo Finder.

I will walk you through some very basic steps to create and implement an accordion content slider on your web pages. But first, have a look at the demo:

Simple Accordion Slider Demo

Item 1 – Content (image and text) with a border

This is content wrapped in a border.

wordpress logoThis area also includes an image. Although you could also add other items like a video or a Google map. I have avoided using the standard Lorem Ipsum text because it just doesn’t add any value to the content of a WordPress blog post.

But we did JUSTIFY this text and added padding around it by adding another class to the class statement like so:

1
<div class="acc_body acc_wrapper">

We then declared the styles for “acc_wrapper” in our style sheet.

Pretty cool huh?

Item 2 – Just text but no border

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.

Item 3 – Just some text in a border

Ok, I gave in … here is some standard Lorem Ipsum text for you.

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.


From this example, you can see we can offer up any kind of content within each accordion section. The demo does not show video content or a Google Map, but this type of content can be inserted too if you want.

So let’s get started.

Let’s start a new HTML page and include the latest jQuery library in the head section.
You can get the latest jQuery library here. To include it, type the following just before the closing </head> tag:

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

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">Item 1 - Heading text</p>
        <div class="acc_body">
        </div>
    </div>
    <div class="acc_content">
        <p class="acc_head">Item 2 - Heading text</p>
        <div class="acc_body">
        </div>
    </div>
    <div class="acc_content">
        <p class="acc_head">Item 3 - Heading text</p>
        <div class="acc_body">
        </div>
    </div>
</div><!-- end #accordion -->

Each Accordion Content tab is wrapped in a DIV with a class or “acc_content”. The heading is identified with the class of “acc_head”. You can change this if you wish. In fact, for SEO purposes, it might make better sense to use an H@ or similar heading tag instead with a class of “acc_head”.

The content, which we will hide later when the page loads, goes inside the DIV tag with the class of “acc_content”.

The entire Accordion is wrapped in an ID tag here as “accordion” just to distinguish this accordion from others we may want to place on a page. If you wanted another section of content to have an accordion, you should give it a different ID tag to make sure the browser can distinguish between them.

If you need more than three accordion tabs, simply add another DIV section with a class of “acc_content” and the other stuff inside, and you are good to go.

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

So in your style sheet (you did include one yes?), put in the code below. (If you haven’t already you should link your style sheet in the HTML file.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 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 text and adds the 'plus' image in the accordion */
.acc_head {
    font-size:12px;
    font-weight:bold;
    padding:10px 0 10px 25px; /* make sure to indent the text to make room for the image below */
    background:#cce3f6 url('images/plus-sign-blue.png') no-repeat 10px center; /* Set background color and the image */
    cursor:pointer; /* Change the cursor so visitors know to click it */
}

.acc_body { margin-bottom:10px; }

Good!

Now you can add some content to your content areas (inside the DIV with a class of “acc_body”). Feel free to use the content from the demo above if you want.

After you add the content, we can add “the Magic”! So let’s do that now.

Somewhere after the opening BODY tag, add the following code:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
$(document).ready(function() {
    //hide the all of the accordion body elements 'acc_body' associated with each accordion section
    $(".acc_body").hide();

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

Just after the BODY tag is usually ok. This will hide all of the content under each accordion heading. It then tells the browser to show the content just after the heading that has been clicked.

Save your file and test it out in your browser to make sure everything is working.

This is a great way to add content to a web page, that isn’t visible at first, still allowing it to be indexed by the Search Engines.

Best of all, if a visitor doesn’t have JavaScript enabled on their browser, they still get to see all of your valuable content.

 
 
 
%d bloggers like this: