Summary Links accordion Webpart in Sharepoint 2013

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

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

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

<style type="text/css">

.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: #181009;

margin-bottom: 0.5em;

margin-right: 0.75em;

margin-left: 0.75em;

margin-bottom: 1px;

}

.dfwp-list .item:hover{

    background-color: #db9356;

}

.dfwp-list .link-item a{

    margin-left: 2em;

    color: white;

}

</style>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

<script>

$(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");*/

            $(".dfwp-list").not(":first").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('fast');

            })

}

</script> 

4. Whole code added here. See in fig

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