Skip Ribbon Commands
Skip to main content

:

> Posts > SharePoint 2013 / Office 365 Web Parts in a jQuery UI Accordion
April 29
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.

image 

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!

Comments

I have a problem

Hi,

I tried to put this one to work, but I don't know why it does not work, it does not show up like in the photo...please help! The other one from the previous post that you did works like a charm!
 on 5/20/2014 4:24 PM

Script problems

Hey guys, sorry for those that were having problems with the previous script. I'm not sure if a recent DOM change affected it or something, but I've since tweaked the script and it should be working fine now.

Thanks!
EMS\markrackleyNo presence information on 5/21/2014 9:16 AM

SharePoint Architect, Developer, Blogger, Speaker, Author, and general pain in the butt.
 
Thoughts, views, and opinions expressed in this blog are solely my own.
 
Remember, the Impossible just takes longer.
​​​​
 

 Blogs you should be reading