How to Create an Accordion Web Part

An accordion web part is a web part that contains a list in which a list item can be clicked to expand and show sub items to that list item.

To the left is a screenshot of one I did recently in SharePoint using jQuery. In this example, the Group 1, Group 2, and Group 3 items have sub items. Group 2 is expanded to show its sub items. I could click on the "Group 2" label and the sub items would collapse such that the Group 2 item would look like the Group 1 and Group 3 items.

Below is the jQuery script I wrote that controls the expand/collapse (or accordion) functionality.

The HTML...

<ul class="expandCollapse">
  <li>
    <a class="expandCollapseHead" href="#">Group 1</a>
    <div class="expandCollapseBody">
      <ul>
        <li><a href="#">Group 1 sub 1</a></li>
        <li><a href="#">Group 1 sub 2</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a class="expandCollapseHead" href="#">Group 2</a>
    <div class="expandCollapseBody">
      <ul>
        <li><a href="#">Group 2 sub 1</a></li>
        <li><a href="#">Group 2 sub 2</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a class="expandCollapseHead" href="#">Group 3</a>
    <div class="expandCollapseBody">
      <ul>
        <li><a href="#">Group 3 sub 1</a></li>
        <li><a href="#">Group 3 sub 2</a></li>
      </ul>
    </div>
  </li>
</ul>

 

The jQuery...

function expandCollapse() {
    //     The class "expandCollapse" is applied to the <ul> of the top level list. The class
    "expandCollapseHead" is applied to the <a> within each list item of the top-level list.
    Trigger this function when the link is clicked.
    $('.expandCollapse .expandCollapseHead').click(function() {
        var head = $(this);

        //    Toggle the body open or closed
        $(head).next(".expandCollapseBody").toggle();
        if($(head).parent().hasClass("expanded")) {
            $(head).parent().removeClass("expanded");
        }
        else {
            $(head).parent().addClass("expanded");
        }
        return false;
    });
}

The CSS...

#wpMyLinks {
    padding:3px 14px 20px 14px;
}
#wpMyLinks ul {
    background:url('/Style%20Library/Images/divider_gradient_172.gif') no-repeat 0 0;
    list-style:none;
    margin:0;
    padding:0;
}
#wpMyLinks ul li {
    background:url('/Style%20Library/Images/divider_gradient_172.gif') no-repeat left bottom;
}
#wpMyLinks ul li a.expandCollapseHead {
    background:url('/Style%20Library/Images/icon_plus_gold.png') 0 9px no-repeat;
    color:#36424a;
    display:block;
    padding:8px 0 8px 18px;
    text-decoration:none;
}
#wpMyLinks ul li a.expandCollapseHead:hover {
    text-decoration:none;
}
#wpMyLinks ul li.expanded a.expandCollapseHead {
    background-image:url('/Style%20Library/Images/icon_minus_gold.png');
}
#wpMyLinks ul li ul.expandCollapseBody {
    background:transparent;
    display:none;
    padding:5px 0 5px 30px;
}
#wpMyLinks ul li ul.expandCollapseBody li {
    background:transparent;
    padding:0;
}
#wpMyLinks ul li ul.expandCollapseBody li a, #wpMyLinks ul li.expanded ul.expandCollapseBody li a {
    background:url('/Style%20Library/Images/mylinks_item_bg.gif') 0 10px no-repeat;
    display:block;
    padding:4px 0 4px 8px;
}
#wpMyLinks .allMoreLink {
    background:url('/Style%20Library/Images/pointer_right_gold_small.gif') 2px 4px no-repeat;
    margin-top:10px;
    padding-left:18px;
}

The images...

divider_gradient_172.gif

icon_plus_gold.png

icon_minus_gold.png

mylinks_item_bg.gif

pointer_right_gold_small.gif

Comments

[Sandeep]

Brandon

I think this is not complete post.. are you planning to add more details to it.

[Brandon Anderson]

Sandeep, you're right. Looks like my HTML was stripped out by Typepad. Sorry I didn't realize that sooner. I'll try to get up the HTML in the next day or two. Thanks for notifying me.

[Brandon Anderson]

Sandeep, I added the missing HTML so you can see how the list structure should be set up for the expand/collapse. Good luck.

[David Wallach]

Are you planning a 2010 version?

[Brandon Anderson]

Hi, David. This script is not specific to any version of SharePoint or to SharePoint at all. It can be used in SP2007 or SP2010, or it can be used on a static HTML page. Have fun with it!

[Jacob]

Nifty idea - could potentially add some pizzazz to a static HTML page. Could you include the CSS used for the menu as well?

[Brandon Anderson]

Jacob, I updated the post to include the CSS and the images.