Article
82 comments

Turn summary link web part into an accordion

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.

summary link web part

summary link web part

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.

styled summary link web part

styled summary link web part

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.

[youtube=http://www.youtube.com/watch?v=5lq7bduimio]

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

82 Comments

  1. This worked great. I changed the color easily by just editing the color code to match our branding colors.

    Is there a setting that would allow for the Expand All/Collapse All function? I’m new to jQuery and would love to add that functionality to the Accordion for our page.

    Thanks,
    Sheral

    Reply

    • Actually there is no setting right now for that. What you might can do is to add a separate html form editor web part above that triggers the expand/collaps all. I can provide you the code for that later today.

      Reply

      • If you could post code for the separate web part to trigger the expand/collapse that woudl be great. Your code has saved me a ton of time and provides the visual bells and whistles which allowed me to concentrate on the functionality

        Reply

      • Hi Stefan,
        This works great! One question though, did you ever provide the code to expand/collapse all? I havent been able to figure it out and was hoping you had a solution.

        Thanks!

        Grigs

        Reply

  2. I am having trouble stringing the pieces together. Plus the code in the video does not look quite like the code in your examples abobe.

    Can you string all the pieces together as they should look?

    Thanks much,
    Steve

    Reply

    • Hi Steve,
      have you downloaded the web part below the videos?
      Kind regards
      Stefan

      Reply

  3. Good morning sir, thanks for the swift reply.
    No, I had not downloaded your web-part; I had been trying to work with your code in a regular Content Editor web-part.
    Please forgive my ignorance; I am still fairly new at this. Please tell me; now that I have downloaded your web part, what do I need to do with it? Do I need to have my SharePoint Admins upload it for me or is this something I can work with from within my Team Site?
    Almost forgot, does it matter if I am working in MOSS 2007?
    Best regards,
    Steve

    Reply

  4. Good morning again Stefan,

    So, I proceeded as instructed; this all seemed very straight-forward and un-complicated.

    The results however are exactly the same as I have gotten with every other try. I get the style changes to the headers and links, but none of the accordion affect. So my links list is prettier, but no change in function.

    Examining the code in the web-part, it is identical to the code I pieced together from your article and applied in my own content-editor web-part. That does answer one question at least; it appears that I was assembling the pieces correctly.

    So the question now is, is SP 2007 the problem.
    Thoughts?
    Steve

    Reply

  5. Yes, I can access/download these scripts. I can do the same for the original locations in the web-part too. We use jquery scripts for a number of SP tools.

    I have even tried downloading the scripts to a library in the same site collection and referencing them that way in the script.

    Still no-go.
    Still

    Reply

    • OK let me check this on one of my SharePoint 2007 Servers in a couple of hours.

      Reply

  6. Hi Steve,

    This worked great for me! Thanks a lot! A quick question to ask. By using accordion script is there any ways to display the links in a summary link webpart in a Horizontal Manner?

    Reply

    • Do you like to have the groups horizontal or how you like to the the summary link web part horizontal?

      Reply

  7. hi, this is the great resource, but it is converting all my summary links to collapsible, how can i apply this to one particular summary links on my site?

    Reply

    • You need to tweak this script a little bit with the web part id’s. After you got the web part ID you need to replace any occourance of $(“.dfwp-list”) to $(“#ct_yourwebpartID .dfwp-list”).
      Do you know how you get the ID using IE Developer Toolbar?

      Reply

    • You should be able to change the font if you add a font family to this style:
      .dfwp-list .link-item a{ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; margin-left: 2em; color: white; }

      Reply

  8. Thanks, Stefan.

    I used your download above and uploaded the webpart into my site. Where do I need to input this code to change the Summary Links font to white?

    Reply

    • The base web part of this customisation is a HTML Form Web Part. To edit the css you just need to edit the web part via the tool pane on the right side. There you will find a button that says edit source code. Then you are able to change the values to everything you like to have.
      Greetings
      Stefan

      Reply

  9. Disregard, I made the adjustments! Thanks again for the tutorial! Very Helpful!

    Reply

  10. Works well, but for some reason my Summary Links web part will not split up the groups into columns. I have 7 groups with several links in each group and I want to display them in two columns, but no matter what I do, they always display in one column. Any idea what could be causing this? I am running this in SP 2013.

    Reply

    • If you like to change the style to a two column layout you need to choose “Configure Styles and Layout”. In the popup dialog you can configure the columns.
      Greetings Stefan

      Reply

  11. can you tell me how to hover over the group header and automatically open versus clicking on the accordion? Thanks

    Reply

    • If you like to change it to over you need to change the click event to mouseenter mouseleave. Therefor the code of the accordion needs to be rewritten.

      Reply

  12. Hi Stefan,
    I downloaded your web part for 2007 and imported it.
    Unfortunately I’m having an issue where only the group header gets styled and the links remain white.
    I’m a ‘newb’ at coding and have no idea how to change this.
    If you could help, that would be great.

    Reply

  13. Nice post all around, Stefan.

    I find myself doing more and more of this type of thing (changing the display of existing Web Parts client side by manipulating the DOM on page load) to improve the SharePoint UX.

    I’m working on a project right now where we’re using Bootstrap. I’m using script to grab all of the Web Part content in a Web Part Zone and turn it into a nice accordion using the Bootstrap collapse functionality.

    M.

    Reply

  14. You are awesome! This has really helped our Sharepoint become more functional and easier to edit.

    Reply

  15. Hi

    This is a great project, I have one query, I am using SP 2010 and the webpart works however the accordion bit is not working. Our server has restricted internet access so the link http://code.jquery.com/jquery-1.7.2.min.js is blocked by the server at the moment. Do you think this is the reason the accordion function doesnt work?
    Pritesh

    Reply

    • Jquery libraries are client side libraries. They are not loaded on the client and not on the server. Is your portal running on https? In this case you should change the path of the script reference to //code.jquery.com/jquery-1.7.2.min.js in order to work. Can you open the library on your client?

      regards
      Stefan

      Reply

      • hi
        thanks for your prompt response. Its not https but i tried changing the link as you advised and it didnt work. When you said try and open the library on your client, if you meant trying to open http://code.jquery.com/jquery-1.7.2.min.js, it comes up with access denied due to the firewall.
        apologies, i am no expert on the programming side of things
        thanks for your help.

        Reply

        • There are certain provider where the JQuery library is hosted on the web. JQuery.com might be blocked but you can also try to open this library from //ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js this is might not blocked.
          I think some web site won’t work correctly if you cannot open jquery from any of those locations.
          Alternatively you can download this library from somewhere outside your organisation and reference it from the style library.

          Reply

  16. This works great in FF but not IE7.

    Error message is ‘Object doesn’t support this action’

    Reply

    • This is only test with IE8 at a minimum but you should check if the jquery version I used support such an old browser. This could be the problem.

      Reply

  17. Hey, I have been trying for a while to get the code to work for me, but I have run into an issue that I can’t seem to find a way around.

    The issue is that I don’t think the sharepoint site i’m working out off ( ‘child site’) has media and content webpage enabled (I only see list and library in the category list, instead of everything else the video shows), and I need help with a way to either enable it (site permissions say that I have full control) or possibly tweak the code so I could copy it into the site’s aspx page.

    I hope my question is clear; if not, do as for more information. I’ve been working at this for hours, so I would sincerely appreciate any help I can get.

    Reply

    • Summary Web Part is part of the Publishing Infrastructure Feature which means it is not available on SharePoint Foundation. If you have a SharePoint Server you need to enable the Site Collection Feature “SharePoint Server Publishing Infrastructure”.

      Reply

  18. I just wanted to say thank you so much for sharing all of your knowledge! Your truly an inspiration!

    Reply

  19. Hi Stefan
    I hope comments on this page are still monitored. I came across your page and thought my prayers had been answered. I have been struggling for 2 days to get an accordion function working for one of my page layouts (and/or pages). I tried to follow your video and use your code but nothing seems to happen to the Summary Link web part. Given my code ignorance I do not know what is going on. I am using Sharepoint 2013 online version, could this explain? Also I cannot seem to import your download as a web part as none of the files are recognised when I try to import them. I am losing my hair on this one. Any help would be amazing!
    thanks
    C.

    Reply

    • Hi Chico,
      I still monitore an try to reply an the comments. Unfortunately I haven’t had time to look in your issue but hopefully I will have time over the next couple of days. Currently the SP24 team and I are preparing all for the http://www.sp24conf.com next week.
      I will let you know if I’ve found something.
      /Stefan

      Reply

  20. Hi Stefan, thank you very much for this very helpful article! It works great!
    However, it is only 95% of what I would like to have.. is it possible to stop the group with the current link from collpasing and highlight the current link?

    Thanks a lot,
    Robert

    Reply

    • Hi Robert,
      If I have understood you correct then you like the once opened section to remain open?
      If so you only need to comment out the following line of code:
      $('.dfwp-list').not(dropDown).slideUp('slow');
      To additional hightlight the currently selected group you can assign a new style sheet class to the dropdown variable.
      /Stefan

      Reply

  21. I couldn’t find summary link web part in sharepoint 2013. Please advise.

    Thanks

    Reply

    • To get the summary link web part you need to enable the publishing infrastructure feature. You find this under the site collection features.
      /Stefan

      Reply

  22. This is such a neat application! I’m having a problem with it on the end though. Everything else works, but when I click to expand the group to reveal the list items, it expands and then immediately closes again. No expand and stay.

    Any ideas?

    Thanks,

    Sabrina

    Reply

    • Hi Sabrina,
      which Version of Sharepoint do you use? Which browser have you experienced this problem?
      Thank you.
      /Stefan

      Reply

  23. I had this working then changed something else on the page and am noticiing that the code stops working? Has anyone else experienced this?

    Reply

    • Hi Beth,
      sorry haven’t used the code for a couple of month now. The last thing I’ve updated was with the easing plugin which might cause the issue.
      Currently working on an update for SharePoint 2013 using CSS3.

      /greetings
      Stefan

      Reply

        • In the code that you can download there is a easingBounce jquery plugin in there that might cause the error. In the source code you will find it here:
          $.easing.def = “easeOutBounce”;

          Reply

          • Hi Stefan,

            We just migrated to SP2013 and I see the code in the content editor web part, but when the site is published, the code is not longer working. The $easing is commented out. Any ideas? I’m trying to live tomorrow

          • You have to use the script editor web part or try script embedding. Script tags in not allowed in content editor web part anymore.

            /Stefan

      • Hi Stefan

        Carrying forward from your comment of 5 Feb 2015, were you able to finalize the SP 2013 version by any chance. The downloand option in your original post still gives only 2007 and 2010 versions.

        Thanks

        Khan

        Reply

  24. Stefan,

    Thanks for your code. I’m new to SharePoint programming, and would like to know how you get your code to apply to only the Summary Links web part, and not to all the lists on the page? I appreciate any assistance with this.

    Thank You,
    Ralph

    Reply

    • This should only be applied to the summary link web parts on a web page. The CSS classes I request in that code are not present on the lists.

      /Stefan

      Reply

  25. Thanks for this ..it works great!

    Also .. can you help on how I can have the first panel open on the page load so that a user can tell it’s an accordion ?

    Reply

  26. Nevermind…figured it out by modifying this line

    from:
    $(“.dfwp-list”).slideUp(“fast”);

    to
    $(“.dfwp-list”).not(“:first”).slideUp(“fast”);

    Thanks again!

    Reply

  27. Hi Stefan, Thanks for the code, I use in Sharepoint 2013 and it works great. On page load and refresh, the summary web part would ‘flash’ for a sec before the accordion loads. Do you know how to ‘hide’ it, so the users can only see the accordion. Thanks!

    Reply

    • Hi Rita,
      you might be able to hide all the groups using css on first load and disable the initial hiding in the scripts. This causes all the groups to be hidden initially and don’t need to be done once the document has been loaded.

      This might solve your issue.

      /Greetings
      Stefan

      Reply

        • 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.

          Reply

  28. Hi Stefan, just wondering if you have this capability put together for SP2013 “Custom List” Accordion. I have found two blogs on the internet for JSLink option but cannot get any result. Looking to do a FAQ. Thanks for any help/advise.

    Reply

  29. Hi Stefan,
    This works great in one subsite of the company i work and solved me a lot of problems.

    Question: is there any way to add different images to the group headers?

    I’m looking forward to hearing from you.

    Rodrigo

    Reply

    • The only thing you can add additional icons is to write them into the CSS Style Sheet and add them as background-colors plus an extra padding. I would suggest that you use the nth-child selector. Useful nth-child recipes

      /Stefan

      Reply

  30. Hi Stefan

    Hope you are still monitoring the comments here.

    First and foremost, thousand of thanks for your wonderful scripts.

    I am using SP2013 and it works almost 99% fine.

    However, after i click “stop editing”

    Right at the bottom of the internet explorer will show
    “Only secure content is displayed”.

    It only works when i select “show all content”.

    I will have to do that all the time.

    Hopefully you will know the issues ?

    Thanks and Regard
    Alvin

    Reply

    • One more things it appear at the top of the browser
      ” Please stop hotlinking my easing script – use a real CDN instead. Many thanks.
      Lols.

      It will disappear if i click the “x” button.

      Reply

  31. We have modified the below css and after that same code is working fine in SharePoint 2013/SharePoint Online.

    .dfwp-list{
    background-color: #0072C6;
    margin-bottom: 0.5em;
    margin-right: 0.75em;
    margin-left: 0.75em;
    margin-bottom: 1px;

    }

    Reply

  32. Hi Stefan,

    This is fantastic. I have been able to implement this successfully and looks very smart. I have two issues:

    1. Is there a way we can make headers with information under them a different colour to indicate there is something there to see (as opposed to clicking your way through each one to see if there is anything under it)?

    2. Is there a way to allow the code to apply to only one summary links web part on a page and not others?

    Thanks for your smartness!

    Dipa

    Reply

    • HI,

      1.) You only need to change the color in the CSS to the color that suites better for you.
      2:) Never tried it out but you can simply bind it to only one web part on the page if you know th exact ID of this web part.

      /Stefan

      Reply

  33. I have very limited programming knowledge – I tried this on my summary of links and it doesn’t work. Is there script that has to be written and that runs in the background (of the page) that must take place before this script will work? Thank you.

    Reply

  34. This works fabulous! thank you very much. Question: Is it possible to make it accordion down one more level? A group within a group?

    Reply

  35. Many thanks for providing this. I was wondering what other code would need to be added to make a web part editable. I can edit the page and summary links no problem, but some sort of browser security check is preventing me from editing a web part with the provided code in place. Does anyone have a piece of JS code to get around that? I’ve seen some stuff on other posts, but I’m not sure if it’s too much code for a minor tweak. Any help would be appreciated!

    Reply

  36. This is fantastic Stefan. I do have one question… I have a fairly substantial list of links in some cases. Is there any possibility of cascading the links to a new column in order to better display large number of links?

    Thanks again for this solution.

    Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.