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;
    });

}

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.