asked on

SharePoint 2010 Accordion for Webparts

Hi All
I have a web part page with 4 web parts on that page. I am trying to add a content editor webpart with some jquery using the accordion UI offered on jquery UI to wrap up the 4 web parts into an accordion.

I have this code here which works in 2013 but it is not working in 2010, I have tried a few things but I just cannot seem to get it to work -- Thank you in advance to whoever can get it to go :)

<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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($) {
//Add the Web part titles for the webparts that should be displayed in the accordion
SharePointAccordian(["Documents","Pages"]);
});

function SharePointAccordian(webPartTitles)
{

for(index in webPartTitles)
{
var title = webPartTitles[index];

$("#accordian").append('<h3>'+title+'</h3>');
$("h2.ms-webpart-titleText span:contains('"+title+"')").each(function(){

if ($(this).text() == title){
var outerDiv = $('<div></div>');
var outerP = $('<p></p>');
var innerItem = $(this).closest("span").hide().closest("[id^='MSOZoneCell_WebPart']").contents();
outerP.append(innerItem);
outerDiv.append(outerP);
$("#accordian").append(outerDiv);
}
});
}
$("#accordian").accordion({ heightStyle: "content" });
}

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

Rainer Jeschor

Hi,
which SharePoint edition?
What type of page (web part zones) and what type of web parts (the four on your page) have you added?
I just want to reproduce the behavior.
Thanks.
Rainer

Rainer Jeschor

Hi,
the following code works on my SharePoint 2010 Server.
I used a "normal" wiki page and added two list view web parts (Documents and Pages) and one Content Editor web part. The code is saved into a text file, this file is uploaded to a document library on that site and then this file is being referenced by the content editor web part.

<link  type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
 
<script type="text/javascript">
[b]_spBodyOnLoadFunctionNames.push("InitAccordion");

function InitAccordion() {
	SharePointAccordian(["Documents","Pages"]);
}[/b]
   
function SharePointAccordian(webPartTitles) {

	for(index in webPartTitles) {
		var title = webPartTitles[index];
           
		[b]jQuery[/b]("#accordian").append('<h3>'+title+'</h3>');
		[b]jQuery[/b]("[b]h3.ms-WPTitle[/b] span:contains('"+title+"')").each(function(){
			if ($(this).text() == title){
				var outerDiv = $('<div></div>');
				var outerP = $('<p></p>');
				var innerItem = $(this).closest("span").hide().closest("[id^='MSOZoneCell_WebPart']").contents();
				outerP.append(innerItem);
				outerDiv.append(outerP);
				jQuery("#accordian").append(outerDiv);
                }
            });
        }
       [b]jQuery[/b]("#accordian").accordion({ heightStyle: "content" });
}

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

Open in new window

Changes to your code:
1. Web Part Selector
SP2010 seems to construct the web part title dom in a different way - therefore this is the correct selector:
jQuery("h3.ms-WPTitle span:contains('"+title+"')").each(function(){

2. Use built-in function to push custom function to document.ready event
Instead of using the jQuery.document.ready use the built-on function spBodyOnLoadFunctionNames
and wrap the original code into an additional function.

3. Do not use the jQuery alias "$"
Try to avoid the usage of the jQuery alias "$" and instead use "jQuery" alias because SharePoint does on some pages/functionalities create its own "$" alias.

HTH
Rainer

CharlieMShanks

ASKER

Thank you for your help. I have just tried to get this going using the script provided. I have created a normal page - just has one full width webpart zone. I have added two webparts called tasks and links, and a third which is the content editor webpart. I have added the script in the following ways none of which have worked - added as a link to a text file to the content editor, added directly to the content editor and added as a link to a js file.
Unfortunately I don't get anything happening,

ASKER CERTIFIED SOLUTION

Rainer Jeschor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

CharlieMShanks

ASKER

Hi, that has worked it was doing a bunch of foreign characters to the script editor. Thank you very much!!

CharlieMShanks

ASKER

Thank you :)