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.

  • 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 – Stefan Bauer Dec 25 '13 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 '13 at 19:08
  • 1
    @StefanBauer I've added a reference to your blog post as the OP didn't. – Benny Skogberg Dec 25 '13 at 21:27
  • Sorry about that. I will be sure to place the code origin next time. Thanks for letting me know. – SharePoint Lady Dec 30 '13 at 15:00
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>
  • Thank you, Waqas Sarwar MCSE for your response. I added "<" & ">" to the post. I will try your suggestion now. Thanks. – SharePoint Lady Dec 24 '13 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. – SharePoint Lady Dec 24 '13 at 13:41
  • 1
    You should download this plugin and use it locally for example from the style library. – Stefan Bauer Dec 25 '13 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.