Accordion Effect

Jobs from Indeed
Published:
By:

If the content in a web page exceeds the size of the user's window then they will be required to do a lot of scrolling to view the page content. In some cases it may be beneficial to shrink the content containers using an accordion effect so the user can select the content they want to view without having to do a lot of scrolling.

In this accordion example we will be using the jQuery Javascript library to help us develop the accordion effect and we will also use the image sprite method described in another article to display the user controls for the accordion.


Accordion Effect Design

Most of the design for the accordions is simple CSS settings for appearance, colors, borders, etc. The only design work outside of the CSS appearance are the accordion controls. A sprite image with two 60 pixel by 60 pixel icons is created and will be used to display a 60 by 60 pixel control element at the top of each accordion.

 

If you are not familiar with the use of sprites there are articles and tutorials available to explain the technique. The basic concept relies on a fixed display size element that will show only one of the sprites inside the full size image.


When the page is first loaded all accordions will be closed. When the user clicks on an accordion control that accordion element will slowly open and display it's contents. The control for the accordion element will change appearance so the user will know they can click it to close the element. If the user clicks another accordion while one is open the new element will slowly open while the previous element is automatically closed.


Accordion Effect HTML

The HTML code for the accordions is composed of a set of DIV tags, the first is a pair of dig tags that is a container for the entire accordion set. Inside the container will be one or more sets of DIV tags of the class accordion. Each pair of accordion tags will contain an accordion title tag pair that contains the title text or HTML for an accordion element followed by an accordion control DIV tag pair before the title is closed. And finally there is the accordion content DIV tag pair that wraps any text or HTML that will be hidden inside the accordion element until it is opened.

<div id="accordion-container">
    <div class="accordion">
        <div class="accordion-title">Accordion One<div class="accordion-control"></div>
        <div class="accordion-content">
            Lorem Ipsum One
        </div>
    </div>

    <div class="accordion">
        <div class="accordion-title">Accordion Two<div class="accordion-control"></div>
        <div class="accordion-content">
            Lorem Ipsum Two
        </div>
    </div>

    <div class="accordion">
        <div class="accordion-title">Accordion Three<div class="accordion-control"></div>
        <div class="accordion-content">
            Lorem Ipsum Three
        </div>
    </div>
</div>


Accordion Effect CSS

The CSS that defines the accordion container is fairly simple and is mainly used to define the width and positioning of the entire accordion on the web page.

 

#accordion-container {
    width: 640px;
    text-align: left;
    margin: 0 auto;
}

 

 Each accordion element is also simple, it is set to fill the entire width of the accordion container.

 

.accordion {
    width: 100%;
}


 The accordion title element again must fill the entire width of the accordion but the remaining styling can be customized for appearance. The height however should be at least as tall as the control icon.

 

.accordion-title {
    width: 100%;
    height: 60px;
    color: #fff;
    background: #000;
}


 

The accordion control is floated to the right to maintain position and is sized to be exactly the size of a single icon sprite image. And the background is set to the image containing the control sprites.

 

.accordion-control {
    float: right;
    width: 60px;
    height: 60px;
    background: url("../img/icons.png");
}


 

And accordion open class is defined to show the second icon in the sprite image by shifting the background image in the control left by the width of one icon. Adding this class to a control element when an accordion opens will show the user which control to click to close the accordion.

 

.accordion-open {
    background-position: -60px 0px;
}


 

The accordion content must have the overflow set to hidden so the content will not be visible when the accordion is closed. Additional styling can be added for appearance purposes.

 

.accordion-content {
    overflow: hidden;
    border-bottom: 4px solid #000;
}


 

The accordion wrapper class is used for a special wrapper that will be dynamically added to the content of each accordion element when the page is loaded. This is used to add more styling possibilities to the accordion element and maintain and static height when the accordion content element is closed.

 

.accordion-wrapper {
    background: #eee;
    float: left;
    width: 100%;
}


 

And finally an accordion minimum height class is defined for a special element that will be added to each accordion content element dynamically to ensure that each element has a minimum height when opened.

 

.accordion-minheight {
    float: left;
    width: 1px;
    height: 400px;
}


 

 

Accordion Effect Code

Before starting the code itself it is important to note that the jQuery library is required and must be loaded in the web page. While it is possible to download the jQuery library and include it with our web site code it is often more convenient to utilize the jQuery library service provided by Google. In this example we pull the jQuery library from Google using the following HTML code.

 

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


 

The dynamic changes to the web page and user events are executed once the page is loaded and ready by placing all the code inside the document ready function.

 

/* initialize the accordion once the document is loaded and ready */
$(document).ready(function() {
    /* initialization code */
    
});


 

Once the page is loaded the accordion content elements are adjusted to have a height of 0px so they will be in the closed state. The accordion wrapper and minium height elements are also added to the content of each accordion content element.

 

// locate each accordion content element and make some adjustments
$(".accordion-content").each(function() {
    // set the initial height to 0px
    $(this).css({height: "0px"});

    // wrap the accordion content in a wrapper and add a minimum height element
    $(this).html('' + $(this).html() + '');
});


 

The accordion effect is based completely on events from user interaction on the accordion controls. The click event for each element is bound with code that checks the current state of the control and adjusts the accordion content elements accordingly.

 

// add a click event to all the accordion controls
$(".accordion-control").click(function() {
    // if this control element is already open then we close it
    if( $(this).hasClass("accordion-open") ) {
        // animate the closing of the accordion
        $(this).parent().parent().find(".accordion-content").animate(
            { height: "0px" },
            1000
        );

        // remove the class that makes the accordion control show the open icon
        $(this).removeClass("accordion-open");
    }
    // the accordion was not open so we will close all others and open this one
    else {
        // locate any open accordions and close them
        $(".accordion-control.accordion-open").each(function() {
            $(this).parent().parent().find(".accordion-content").animate(
                { height: "0px" },
                1000
            );

            $(this).removeClass("accordion-open");
        });

        // add the open accordion class to this control to show the open icon
        $(this).addClass("accordion-open");

        // animate the opening of this accordion element
        $(this).parent().parent().find(".accordion-content").animate(
            { height: $(this).parent().parent().find(".accordion-content > .accordion-wrapper").height() + "px" },
            1000
        );
    }
});

 

 

Accordion Effect Content

With the CSS and jQuery code in place the number of accordion elements and the content can be changed by adding or removing accordion DIV elements and their content without ever needing  to touch the CSS or jQuery code again. The example includes three accordion elements that can be reduced, modified, or duplicated.

A working demo of the accordion can be viewed here.