SharePoint 2013 / Office 365 Web Parts in a jQuery UI Accordion

My previous post Tabbed Web Parts in SharePoint 2013 / Office 365 walked you through using a script to place SharePoint Web Parts into the jQuery UI tabs. Based upon the response (and since I’d already done most of the work) I thought I ‘d throw together a quick script for putting Web Parts into jQuery UI’s Accordion feature.  Follow the exact same instructions as in the aforementioned Tab blog post but use the scripts in this blog post instead.

The script

<!-- Reference the jQueryUI theme's stylesheet on the Google CDN. Here we're using the "Start" theme --> 
<link  type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" /> 
<!-- Reference jQuery on the Google CDN --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Reference jQueryUI on the Google CDN --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> 

<script type="text/javascript">
     jQuery(document).ready(function($) {
         //Put the WebPart Title for all the Web Parts you wish
         //to put into the jQuery UI Accordion into the array below.
        HillbillyAccordian(["Cities","Orders","Customers"]);
    });
    
    function HillbillyAccordian(webPartTitles)
    {
        for(index in webPartTitles)
        {
            var title = webPartTitles[index];
            $("#accordian").append('<h3>'+title+'</h3>');
            $("span:contains('"+title+"')").each(function(){
                if ($(this).text() == title){
                    var webPart = $(this).hide().closest("span").closest("[id^='MSOZoneCell_WebPart']");
                    if ($(webPart).contents().html() != undefined)
                    {
                         webPart = $(webPart).contents();
                    }
                    $("#accordian").append(webPart);
                }
            });
        }
        $("#accordian").accordion({ heightStyle: "content" });
    }


</script>
<div id="accordian"></div>

The script with persisted content

<!-- Reference the jQueryUI theme's stylesheet on the Google CDN. Here we're using the "Start" theme --> 
<link  type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" /> 
<!-- Reference jQuery on the Google CDN --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Reference jQueryUI on the Google CDN --> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> 

<script type="text/javascript">
     jQuery(document).ready(function($) {
         //Put the WebPart Title for all the Web Parts you wish
         //to put into the jQuery UI Accordion into the array below.
        HillbillyAccordian(["Cities","Orders","Customers"]);
        //show persisted content
        ShowActiveContent();

    });
    
    function HillbillyAccordian(webPartTitles)
    {
        for(index in webPartTitles)
        {
            var title = webPartTitles[index];
            $("#accordian").append('<h3 id="heading'+index+'" onclick="SetCookie(this.id);">'+title+'</h3>');
            $("span:contains('"+title+"')").each(function(){
                if ($(this).text() == title){
                    var webPart = $(this).hide().closest("span").closest("[id^='MSOZoneCell_WebPart']");
                    if ($(webPart).contents().html() != undefined)
                    {
                         webPart = $(webPart).contents();
                    }
                    $("#accordian").append(webPart);
                }
            });
        }
        $("#accordian").accordion({ heightStyle: "content" });
    }

    function SetCookie(id)
    {
           var date = new Date();
           //make the cookie expire in 5 minutes
           date.setTime(date.getTime()+(300*1000));
           var expires = "; expires="+date.toGMTString();
           document.cookie = "ActiveContent="+id+expires+"; path=/";
    }
    
    function ShowActiveContent()
    {
        var name = "ActiveContent";
        var cookieArray = document.cookie.split(";");
        for (index in cookieArray)
        {
            var keyValuePair = cookieArray[index].split("=");
            var key = keyValuePair[0];
            key  = key.replace(/^\s+|\s+$/g, "");
            if (key == name)
            {
                var value = keyValuePair[1];
                $("#" + value).click();
                return;
            }
        }
    }

</script>
<div id="accordian"></div>

Ta and Da

Enjoy… I think the tabs look better, but hey, to each his own. Please let me know if you’d like to see any other jQuery UI functionality working in SharePoint and I’ll see what I can do to make it happen.

Cheers!