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;
});
}
Brandon
I think this is not complete post.. are you planning to add more details to it.
Posted by: Sandeep | 02/10/2010 at 08:16 AM
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.
Posted by: Brandon Anderson | 02/10/2010 at 08:52 AM
Sandeep, I added the missing HTML so you can see how the list structure should be set up for the expand/collapse. Good luck.
Posted by: Brandon Anderson | 03/16/2010 at 11:12 PM