3

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.

4
  • 1
    Can you please add the code origin. The source is copied 1:1 from my blog post. Thanx. n8d.at/blog/turn-summary-link-web-part-into-an-accordion Dec 25, 2013 at 18:30
  • 1
    It is good practice at any StackExchange site to honor the origin of code and other sources. Please add a link to the source of your code.
    – Benny Skogberg
    Dec 25, 2013 at 19:08
  • 1
    @StefanBauer I've added a reference to your blog post as the OP didn't.
    – Benny Skogberg
    Dec 25, 2013 at 21:27
  • Sorry about that. I will be sure to place the code origin next time. Thanks for letting me know. Dec 30, 2013 at 15:00

3 Answers 3

2

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>
3
  • Thank you, Waqas Sarwar MCSE for your response. I added "<" & ">" to the post. I will try your suggestion now. Thanks. Dec 24, 2013 at 13:31
  • Thanks again, Waqas Sarwar MCSE. I did successfully try your suggestion, however, "gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" easy plugin is not recommended to be used. So, I will find a work around. Thanks again for your help. Dec 24, 2013 at 13:41
  • 1
    You should download this plugin and use it locally for example from the style library. Dec 25, 2013 at 18:42
0

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>
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.