SP13 Accordian View (HTML Script)

Question

I am working with SP2013. My objective is to add an accordion View to a Summary Link Web Part. I added the Summary Link Web Part. Within the Summary Link Web Part, I created groups. Then I added a Content Editor Web Part. Within the Content Editor Web Part, I added the code found below to the HTML code. The CSS code works, however, the jquery script is not working properly. Can anyone tell what I am doing wrong with the code? Thanks for your help.

  <  <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: #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;
}
</style>


<script> 

$(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>  >

Sorce code from Stefan Bauers post Turn summary link web part into an accordion.

Answer 1

what's the error you are getting? I think your refrence to the JScript is missing....could you please add below lines after the </style> and before start of <script>

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

Answer 2

I had a similar problem till I removed the following reference:

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

Answer 3

It worked fine for me. Instead using content query webpart i used script webpart. here is the what it looked like. Ensure your code can access the jquery library

<script src="/Style Library/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/Style Library/Scripts/jquery.easing.min.js" type="text/javascript"></script>



​​<script> 

$(document).ready(function(){

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

})

var accordion = 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');

    })
}
</script>