In SharePoint the summary link web part is a great tool to create overviews made of internal and external links. The challenge with this web part is to enhance the presentation when a lot of links will be added to this web part. In this post I will present how to turn this basic web part to an accordion which gives the user a much better experience.

Styling the summary link web part

First of all I created a simple summary link web part and added grouping of those links. As you see the amount of links are not that much but enough that specific links are hard to read and find the belonging groups as well.

To enhance the default style I simply added a content editor web part to the page that contains my new style definition. To improve the group header I simply added a style definition for the CSS class “groupheader”. I also added some styling for the links as well.

.groupheader{
	background-color: #0072C6;
	color: white;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size: 140%;
	padding: 0.5em;
	padding-left: 0.75em;
	margin-right: 0.5em;
	margin-bottom: 1px;
}

.groupmarker:hover .groupheader{
	cursor: pointer;
	background-color: #0597FF;
}

.dfwp-list{
	background-color: #0072C6;
	margin-bottom: 0.5em;
	margin-right: 0.75em;
}
.dfwp-list .item:hover{
	background-color: #0597FF;
}
.dfwp-list .link-item a{
	margin-left: 2em;
	color: white;
}

The style definitions transform the web part now into a metro styled web part. For the user experience I also added a hover effect using CSS. This allows to highlight the currently selected link.

Add accordion script

The turn this web part now into a fully functional accordion all that needs to be done is to add a simple Jquery script the performs the following tasks.

• Hide all hyperlinks in the groups
• When a user clicks a group header
  • Hide all sections that is not the current header
  • Expand current selected link section

This can be accomplished with the following code.

$(document).ready(function(){

		/* Slide up all link items and hide them */
		$(".dfwp-list").slideUp("fast");
		/* Binding a click event handler to the links: */
		$('.groupheader').click(function(e){

			/* Finding the drop down list that corresponds to the current section: */
			var dropDown = $(this).next(".dfwp-list");

			/* Closing all other drop down sections, except the current one */
			$('.dfwp-list').not(dropDown).slideUp('slow');
			dropDown.slideToggle('slow');

			/* Preventing the default event (which would be to navigate the browser to the link's address) */
			e.preventDefault();
		})
})

Now the web part has turned into an accordion with expandable sections, but there is one last step to do. The accordion is currently not editable but this can be fixed with a simple modification of the script.

Make accordion editable again

SharePoint has something called display mode. This display mode indicates how a user has opened a page and can have the following values:

• Browse – indicates that the user views the page
• Design – indicates that the user tries to edit the page

Normally this form context or display mode is use is web part development but it could be used and detected using Jquery. SharePoint renders a hidden input field with the id ”MSOSPWebPartManager_DisplayModeName” that will be set to the appropriate value.

For example the field can look like this if the page is opened in browse mode.

<input type="hidden" name="MSOSPWebPartManager_DisplayModeName" id="MSOSPWebPartManager_DisplayModeName" value="Browse" />

To restore the edit function all that needs to be done is to wrap the script and let it only get executed in browse mode.

$(document).ready(function(){

	// Detect if user view or edit the page
	if($("#MSOSPWebPartManager_DisplayModeName").val() == "Browse"){
		// Register accordion
		accordion();
	}

})

var accordion = function(){

	/* Do fancy easing */
	$.easing.def = "easeOutBounce";

	/* Slide up all link items and hide them */
	$(".dfwp-list").slideUp("fast");
	/* Binding a click event handler to the links: */
	$('.groupheader').click(function(e){

		/* Finding the drop down list that corresponds to the current section: */
		var dropDown = $(this).next(".dfwp-list");

		/* Closing all other drop down sections, except the current one */
		$('.dfwp-list').not(dropDown).slideUp('slow');
		dropDown.slideToggle('slow');

	})
}

The last thing I want to show is the accordion live in action.

Download Accordion Content Editor Web Part - SharePoint 2007 / SharePoint 2010