Use Summary Link Web Part as an Accordion in SharePoint Online 2013

This SharePoint tutorial, we will discuss how to use Summary Link Web Part as an Accordion in SharePoint 2013 Online.

First I added the Summary link web part in my page and added the grouping of those links. See in fig

Summary Link Web Part sharepoint 2013

Now enable the all group as an Accordion I simply added Script Editor Web part to this page. See in fig

Summary Link Web Part sharepoint online

Now I am going to making this web part into a fully functional accordion for this I added a simple Jquery script the performs hide all hyperlinks in this groups and when a user clicks a group header, hide all sections that is not the current header and expand current selected link selection.

So add the following code

<script src=”//code.jquery.com/jquery-1.11.0.min.js”></script>
<script src=”//code.jquery.com/jquery-migrate-1.2.1.min.js”></script>
<script type=”text/javascript”>
$(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();
        })
})
 </script>

Whole code added here. See in fig

Use Summary Link Web Part as an Accordion in SharePoint 2013

Now you able to see your web part work as an Accordion. See in figs and compare with the first fig you able to see the changes.

Use Summary Link Web Part as an Accordion in SharePoint Online

This is how we can use the Summary Link Web Part as an Accordion in SharePoint Online 2013.

You may like following SharePoint tutorials:

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

  • Completely blew away my Summary Links. Deleted the Script Editor web part and the Summary Links were still gone. Had to revert to a previous version of the page.

  • >